[JS]サムネイルにマウスオーバーしたら画像を切り替える

大きい画像1箇所とサムネイルいくつか配置して、サムネイルにマウスオーバーしたら大きい画像をサムネイルのやつに変更するスクリプト。
テーブル版、複数設置版、クロスフェード版の他、jQuery版とMooTools版も書きました。

シンプル版


イベントリスナーを使用したもの

thumbsというIDにあるimgタグを自動収集して、srcから_thumbを抜いたものを
viewに入ってるimgのsrcへ置換します。

テーブル版


イベントリスナーを使用したもの

カスタマイズする場合はforの変数iが1から始まっている事に注意。
これは取得したimgの配列から先頭にあるimg#rollover_viewを飛ばすためです。
逆配置にする場合は、0スタートで(myImg.length-1)とする。

ページ内に複数設置する場合

大きい画像とリストのIDをクラスに変更。親のIDを指定して実行します。

複数設置+クロスフェード

素のJavaScriptに特別なこだわりがあるわけでないのなら、
MooToolsとかjQueryを使ったギャラリープラグインを使う方がお手軽だと思う。

jQuery版

バージョンは1.5で組みましたが1.3以上なら使えるんじゃないかなと。
プラグイン形式です。

MooTools版

バージョン1.3対応。

Download

ZIPにはリスト版・テーブル版・マルチ版・クロスフェード版のhtmlファイルと画像、元のpsdファイルをまとめてあります
ダウンロード:

“Simple Rollover Sample” をダウンロード wtn_simple_rollover.zip – 2870回のダウンロード – 84 kB

  • 2011-02-15 クロスフェード版バグ修正。jQuery版・MooTools版追加。デモをjsfiddleに移した
  • 2011-01-11 クロスフェード版追加
  • 2011-01-06 マルチ版追加
  • 2009-07-03 サンプルZIP作成ついでに書き直し
  • 2008-11-11 ID抜けてたうっかりミス修正

1件のコメント

  1. 動作を確認してみましたが、view に入っている img に myImg という ID を付加しないと私の環境では動作しませんでした。

    通常は myImg という ID 無しに動作するものなのでしょうか?

    動きがスムーズで重宝しています♪

    Reply
  2. 完全に私のうっかりミスです(ノ∀`)
    IMGタグのIDが抜けてたので修正しました。
    コメントありがとうございましたー!

    Reply
  3. こちらのページのおかげで実装することが出来ました!
    ありがとうございます。

    一つご質問なのですが、
    こちらのロールオーバーを複数使用したい場合、
    単にコピーをしても2つめ以降が動作しないのですが、
    このような場合はどうすれば良いのでしょうか?

    ご教授頂けると大変嬉しく思います。

    どうぞよろしくお願い致します。

    Reply
  4. ありがとうございます!
    実装出来ました。

    こちらの切り替え時にフェード効果を追加したい場合はどうすれば良いのでしょうか?

    Reply
  5. gyagarin さん>

    一応記事の追記とZIPに入れておきましたが、エフェクトをつけたいならギャラリープラグインを使う方が早いと思います。

    Reply
  6. ご丁寧にありがとうございました!

    大変助かりました。

    大切に使わせていただきます!

    Reply
  7. こちらのサイトにはずいぶんお世話になっています。
    ありがとうございます。

    ひとつ質問させてください。
    複数設置を考えており、フェード無しで組みました。
    当方のブラウザはFireFoxで無事機能したのですが
    IE8でチェックしたらJSエラーが出て機能しません。

    試しにと思いDLさせていただいたサンプルの複数設置(rollover_multi.html)を
    IEで開いてみたところ機能しませんでした。
    (試しに複数のPCでチェックしましたがだめでした。)
    クロスフェード版はIEでも機能したのですが他にか対策はございますか?

    Reply
  8. yutaro さん>
    お手数かけてしまい申し訳ないです。IEで使えない関数を使っていました。
    修正したZIPをアップロードしましたのでそちらをお試しください。

    Reply
  9. 友人に指摘されデバッカーでチェックしてみました。

    parent.getElementsByClassName(view)[0].src=href;

    この部分が「オブジェクトでサポートされていないプロパティまたはメソッドです。」
    とのことなのですがIEでの代替コード、ないしは対策などあるのでしょうか?
    ちなみにデバッカーは「CompanionJS」を使用しています。

    Reply
  10. おっと、コメント確認せず同じような書き込み失礼しました。
    無事実装完了しました。
    ありがとうございました。

    Reply
  11. クロスフェード版ありがとうございます。
    ダウンロードさせていただいたのですが
    thumb_1のみ他のthumbをマウスオーバーすると
    再び表示ができなくなっております。

    Reply
  12. はじめまして。画像置換を探していて貴サイトへ辿り着きました。
    シンプルでjsに疎い私でも実装できました。ありがとうございます。
    ひとつ質問なのですが、マウスオーバーした時にサムネイルも画像置換することは出来ますでしょうか。
    ご教授いただけると嬉しいです。
    よろしくお願いいたします。

    Reply
  13. ステキなサイトありがとうございます。

    ご質問なのですが、サムネイル画像(右の小さい画像)で、
    本体(左の大きい画像)が切り替わるときに、
    サムネイル画像に登録してある、
    「URL」を本体にも適用するにはどうしたらいいでしょうか?

    サムネイル画像のURLが本体にも適用になり、
    自動的に切り替わるというイメージです。

    お手数をお掛け致しますが、よろしくお願いいたします。

    Reply
  14. monio さん >

    サムネイルのaタグを取得→href属性取得→画像置換と同じ要領で大きい画像のhrefにセット

    という感じで出来ます。
    正直jQueryとかMooToolsとかを使う方が早いと思いますが
    サンプルご希望でしたら元になるバージョンを教えてください。

    Reply
  15. 早速のレスありがとうございます。

    感じとしてはHTMLとCSSは分かるのですが、
    javaスクリプトに関しては全然分からずでして、
    正直、jQueryとかMooToolsの違いも分かっておりません…
    それぐらいは勉強してこいよ!とのお叱りも最もです。

    なので、シンプルな形状であれば、
    それに規準させて頂きたいと思います。

    また、もう一つ甘えさせていただくならば、
    時間変動(10秒後)とかでサムネイルが切り替わると、
    本体(大スクリーン)も切り替わればと思うのですが…

    Reply
  16. monio さん >

    リンクの件は前のコメントで書いた手順を辿れば100%出来ますが、javascript未経験だと難しいかもしれませんね…

    >時間変動(10秒後)とかでサムネイルが切り替わると、本体(大スクリーン)も切り替わればと思うのですが…
    これはつまりスライドショーにしたいということでしょうか?

    Reply
  17. Javaスクリプトの勉強を軽くはしたのですが、
    なかなか「動的」な部分を丁寧に説明してくれる
    サイトがなくて苦戦してまして・・・
    ただ、こちらはソースがあって、非常に分かりやすく、
    勉強させていただきます。

    >スライドショー

    まさにそのとおりです。時間で動作してくれれば、
    「動的」な部分で人目を引けると思っております。

    Reply
  18. jQuery版ですが、IE7ではマウスオーバーするたびに fadeIn が効いたり効かなかったりするようです。

    Reply
  19. いつも参考にさせていただいております。
    ひとつ質問させていただきたいのですが、
    サムネールにロールオーバーしたあと、
    ロールアウトすることで、大きな画像を最初の状態に戻るようにできますでしょうか?

    大きな画像A(最初の状態)

    サムネールBにロールオーバー

    大きな画像Bがフェードイン

    サムネールエリアからロールアウト

    大きな画像Aに戻る

    といった感じです。

    可能でしたら教えてください。
    よろしくお願いいたします。

    Reply
  20. はじめまして。
    画像の切り替えでこちらのサイトにたどり着きました。

    jQuery版を使用したくおもっているのですが、
    サムネイルだけでなく、サムネイルによって切り替わった大きな画像にも
    リンクをつけたいと思っています。
    上記で同様の質問をされている方がいらっしゃいますが、
    少し意味がわからなくて、、、
    サムネイル02にマウスオーバーしたら大きな画像02にもリンクをつけたいと思っています。

    恐れ入りますがご教授の程よろしくお願いします。

    Reply

Leave a Comment.