jQuery：マウスオーバーした画像をメインの画像に反映 | rainingjQueryでサムネイル画像にマウスを置いた場合、メイン画像と差し替えて表示したい場合があります。 ショップシステムなどの商品画像の表示で見かけることが多いです。 また、写真などのギャラリーページなどでも同じような表示の仕方をしていることがあります。 jQueryを使用すれば簡単にサムネイル画像とメイン画像を入れ替えることが可能です。 下記にjQueryの「hover」を利用してサムネイル画像をマウスオーバーした際に、メイン画像と差し替えて表示する方法を記述します。 ■ マウスオーバーした画像をメインの画像に反映 【HTML】 メイン画像とサムネイル画像を表示します。 「mainImage」の箇所に最初に表示する画像を設定します。 <div id="mainImage"> <img src="sample1.jpg" /> </div> <div id="imageList"> <ul>
