サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！

参考：http://codingmania.net/jquery/349.html

JSを読み込みます

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/swapimage.js"></script>

[swapimage.js]JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
 $(".mod_thumbnail").each(function(){
  var set = $(this);
  var btn = set.find(".thumbnaillist li a");
  var image = set.find(".mainimglist img");
    // hover時
    $(btn).hover(function(){
        $(image).attr("src",$(this).attr("href"));
        $(image).attr("alt",$(this).attr("title"));
    });
    //クリック時  
    $(".thumbnaillist a").click(function(){
    return false;
    });
});
});

HTMl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="mod_thumbnail">
<div class="thumbnaillist">
<ul class="ex_clearfix">
<li><a href="img/image01.jpg" title="orange"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li>
<li><a href="img/image02.jpg" title="green"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li>
<li><a href="img/image03.jpg" title="pink"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li>
<li><a href="img/image04.jpg" title="blue"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li>
</ul>
<!-- thumbnaillist_end --></div>
 
<div class="mainimglist">
<img src="img/image01.jpg" alt="orange" width="700" height="350">
<!-- mainimglist_end --></div>
<!-- mod_thumbnail_end --></div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* mod_thumbnail
--------------------------------------------*/
.mod_thumbnail{
 margin:0 0 30px 0;
}
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
}
.thumbnaillist ul{
}
.thumbnaillist li{
    width:60px;
    height:60px;
    float:left;
    background:none;
    padding:0 10px 0px 0;
    margin:0 0 10px 0;
}
.thumbnaillist li a{
    display:block;
}
.thumbnaillist li a:link    {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover   {opacity:0.8;}
.thumbnaillist li a:active  {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}
 
/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
    width:700px;
    height:350px;
    margin:20px 0 0 0;
}
.mainimglist img{
}
スポンサーリンク

コメント