通常サイズの画像とその下にサムネイル画像をセットで表示していて、サムネイル画像にマウスが触れると通常サイズで画像が表示するようにしてみます。
この方法を使うことで、ショッピングサイトなどで、よく見かける一つの商品を色んなアングルから見れるような商品の紹介が出来ると思います。
オンマウスで商品画像を切り替えるサンプル
下記がサンプルになります。サムネイル画像の上にマウスを置くと画像が切り替わります。
下記のhtmlコードとcssコードで作成していますが、必要なところをサイトに合わせて書き直しお使い下さい。
htmlのコード
<div class="imgonmouse"> <!--一番最初に表示される画像--> <img src="画像1アドレス" name="imgonmouse" width="300" height="300" /> <ul> <li><img src="画像1アドレス" onMouseOver="document.imgonmouse.src='画像1アドレス'" /></li> <li><img src="画像2アドレス" onMouseOver="document.imgonmouse.src='画像2アドレス'" /></li> <li><img src="画像3アドレス" onMouseOver="document.imgonmouse.src='画像3アドレス'" /></li> <li><img src="画像4アドレス" onMouseOver="document.imgonmouse.src='画像4アドレス'" /></li> </ul> </div>
cssのコード
.imgonmouse {
border: 1px solid #CCC;
margin: 10px;
overflow: hidden;
width: 300px;
}
.imgonmouse img {
margin-top: 10px;
margin-bottom: 10px;
}
.imgonmouse ul {
padding: 0px;
margin-top: 0px;
}
.imgonmouse ul li img {
height: 44px;
width: 44px;
border: 1px solid #CCC;
padding: 2px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.imgonmouse ul li {
list-style-type: none;
margin: 0px;
padding: 0px;
float: left;
}
最終更新日: 2013年2月5日
マウスの動きに合わせて画像が動くパララックス効果
マウスオーバーでテキストが動く簡単なJqueryコード
Facebookいいねボタン設置
スタイルシートの見本完成-Dreamweaver
背景画像をフルスクリーンで簡単スライドショー
まさに探していたコードですありがとうございました
大変助かりました
一点聞きたいのですがサムネイルの画像にマウスを置くと画像が切り替わるのですがそのあと、切り替わり大きい画像をクリックしたら別画面で商品画像を開くにはどうしたらいいのでしょうか？
コメントありがとうございます。
すみませんが、記事以降のコード紹介は控えさせていただいてますのでご了承ください。
多分JQueryを上手く使うとご希望の方法は出来るかと思います。
はじめまして、非常に簡単に使うことが出来てありがとうございます。
内容も理解しやすくありがとうございます。
一つお聞きしたいのですが、
大きい画像の変更と共に
隣に（下でも）テキストも変更したいのです。
サンプルで言うならば、Photoshop、フラッシュ、とか
画像の下もしくは横にテキストもつけたいのですが・・・。
可能なのでしょうか？