rainingjQueryでサムネイル画像にマウスを置いた場合、メイン画像と差し替えて表示したい場合があります。ショップシステムなどの商品画像の表示で見かけることが多いです。写真などのギャラリーページなどでも同じような表示の仕方をしていることがあります。jQueryを使用すれば簡単にサムネイル画像とメイン画像を入れ替えることが可能です。下記にjQueryの「hover」を利用してサムネイル画像をマウスオーバーした際に、メイン画像と差し替えて表示する方法を記述します。【HTML】メイン画像とサムネイル画像を表示します。「mainImage」の箇所に最初に表示する画像を設定します。50px;}</style>【JS】jQueryを読み込み、マウスオーバーした場合の処理を記述します。サムネイル画像をマウスオーバーした場合、マウスオーバーしている画像の「src」をメイン画像の「src」に反映させています。});});</script>上記の設定をし、サムネイル画像をマウスオーバーするとメイン画像が入れ替わって表示されます。コメントをキャンセルメールアドレスが公開されることはありません。