サムネイル画像にマウスオーバーでメイン写真を切り替えて画像へのリンクを貼る方法

ネットショップの商品ページでよく見かけるやつ。

商品のサムネイル画像を横一列に並べる。
そこにマウスを当てるとメイン画像が切り替わる。
またリンク先も自動で切り替わり、メイン写真をクリックで画像URLに飛ぶ。

実際の動作はこちら。
サムネイル写真にマウスを当てるとメイン写真が切り替わる。
写真は何枚でも掲載可能。

スポンサーリンク

コード

<style type="text/css">
    #mainImage img{
        height:300px;
    }
    div#imageList ul {
        margin: 10px;
        padding: 0;
    }
    div#imageList li {
        float: left;
        list-style-type: none;
        margin-left: 5px;
    }
    div#imageList li img {
        width: 50px;
        height: 50px;
    }
    </style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $('#imageList img').hover(function(){
        $('#mainImage img').attr('src', $(this).attr('src')); 
        $('#mainImage img').wrap($('<a>').attr('href',$(this).attr('src')));
    }); 
});
</script>

<div id="base">

    <div id="mainImage">
        <img src="sample1.jpg"/>
    </div>
 
    <div id="imageList">
        <ul>
            <li><img src="sample1.jpg"></li>
            <li><img src="sample2.jpg"></li>
            <li><img src="sample3.jpg"></li>
            <li><img src="sample4.jpg"></li>
            <li><img src="sample5.jpg"></li>
        </ul>
    </div>
</div>
javascript
スポンサーリンク
のんびりブログ

コメント

タイトルとURLをコピーしました