双報のいろいろ

今日ちょっと同一ページ同一レイヤーで画像を入替えページを製作していてスクリプトを探してみたら、jqueryを使うととっても簡単だということがわかりました。

ヘッダー内
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){
 $('.thumbnail img').fadeTo(0,0.4);
 $('.thumbnail img').hover(function(){
        $(this).fadeTo(300,1.0);
    },
    function(){
        $(this).fadeTo(300,0.4);
    })
    $('.thumbnail a').click(function(){
    var bglink = $(this).attr("href");
    var bgname = $(this).attr("title");
        $("."+ bgname)
         .css("background-image","url("+bglink+")");
         return false;
    });
});
</script>

本文内
<div class="xxxxx" style=" background-image:url(images/2010001.jpg); background-position:5px 5px; width:360px; height:360px; background-repeat:no-repeat"></div>
<div class="thumbnail">
 <a href="images/2010001.jpg" title="xxxxx"><img src="images/2010001s.jpg" width="100" height="100"></a>
 <a href="images/2010002.jpg" title="xxxxx"><img src="images/2010002s.jpg" width="100" height="100"></a>
</div>

たったこれだけで、thumbnail内の画像がクリックされればxxxxx内のこれでは背景ですが入れ換え表示が可能です。（スクリプトに関して詳しくはないので上のスクリプトに関しての問合せにはお答えできません）
xxxxを変えてやれば、同じページ内にいくつものグループで置くこともできます。
そしてjqueryは、いろいろな人がpluginを製作しているので探すといろいろなことが簡単にできるみたいです。これから少し真剣に使っみようかなという感じです。