jQueryでサムネイル画像にマウスを置いた場合、メイン画像と差し替えて表示したい場合があります。
ショップシステムなどの商品画像の表示で見かけることが多いです。
また、写真などのギャラリーページなどでも同じような表示の仕方をしていることがあります。
jQueryを使用すれば簡単にサムネイル画像とメイン画像を入れ替えることが可能です。
下記にjQueryの「hover」を利用してサムネイル画像をマウスオーバーした際に、メイン画像と差し替えて表示する方法を記述します。
■ マウスオーバーした画像をメインの画像に反映
【HTML】
メイン画像とサムネイル画像を表示します。
「mainImage」の箇所に最初に表示する画像を設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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> |
【CSS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style type="text/css">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> |
【JS】
jQueryを読み込み、マウスオーバーした場合の処理を記述します。
サムネイル画像をマウスオーバーした場合、マウスオーバーしている画像の「src」をメイン画像の「src」に反映させています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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」をマウスオーバーした場合 $('#imageList img').hover(function(){ // マウスオーバーしている画像をメインの画像に反映 $('#mainImage img').attr('src', $(this).attr('src')); });});</script> |
上記の設定をし、サムネイル画像をマウスオーバーするとメイン画像が入れ替わって表示されます。