大きい画像１箇所とサムネイルいくつか配置して、サムネイルにマウスオーバーしたら大きい画像をサムネイルのやつに変更するスクリプト。
テーブル版、複数設置版、クロスフェード版の他、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ファイルをまとめてあります
ダウンロード：[ダウンロードが見つかりません]
- 2011-02-15 クロスフェード版バグ修正。jQuery版・MooTools版追加。デモをjsfiddleに移した
- 2011-01-11 クロスフェード版追加
- 2011-01-06 マルチ版追加
- 2009-07-03 サンプルZIP作成ついでに書き直し
- 2008-11-11 ＩＤ抜けてたうっかりミス修正
動作を確認してみましたが、view に入っている img に myImg という ID を付加しないと私の環境では動作しませんでした。
通常は myImg という ID 無しに動作するものなのでしょうか？
動きがスムーズで重宝しています♪
完全に私のうっかりミスです（ノ∀｀）
IMGタグのIDが抜けてたので修正しました。
コメントありがとうございましたー！
こちらのページのおかげで実装することが出来ました！
ありがとうございます。
一つご質問なのですが、
こちらのロールオーバーを複数使用したい場合、
単にコピーをしても2つめ以降が動作しないのですが、
このような場合はどうすれば良いのでしょうか？
ご教授頂けると大変嬉しく思います。
どうぞよろしくお願い致します。
gyagarin さん>
記事の追記を御覧ください。
ありがとうございます！
実装出来ました。
こちらの切り替え時にフェード効果を追加したい場合はどうすれば良いのでしょうか？
gyagarin さん>
一応記事の追記とZIPに入れておきましたが、エフェクトをつけたいならギャラリープラグインを使う方が早いと思います。
ご丁寧にありがとうございました！
大変助かりました。
大切に使わせていただきます！
こちらのサイトにはずいぶんお世話になっています。
ありがとうございます。
ひとつ質問させてください。
複数設置を考えており、フェード無しで組みました。
当方のブラウザはFireFoxで無事機能したのですが
IE8でチェックしたらJSエラーが出て機能しません。
試しにと思いDLさせていただいたサンプルの複数設置（rollover_multi.html）を
IEで開いてみたところ機能しませんでした。
（試しに複数のPCでチェックしましたがだめでした。）
クロスフェード版はIEでも機能したのですが他にか対策はございますか？
yutaro さん>
お手数かけてしまい申し訳ないです。IEで使えない関数を使っていました。
修正したZIPをアップロードしましたのでそちらをお試しください。
友人に指摘されデバッカーでチェックしてみました。
parent.getElementsByClassName(view)[0].src=href;
この部分が「オブジェクトでサポートされていないプロパティまたはメソッドです。」
とのことなのですがIEでの代替コード、ないしは対策などあるのでしょうか？
ちなみにデバッカーは「CompanionJS」を使用しています。
おっと、コメント確認せず同じような書き込み失礼しました。
無事実装完了しました。
ありがとうございました。
クロスフェード版ありがとうございます。
ダウンロードさせていただいたのですが
thumb_1のみ他のthumbをマウスオーバーすると
再び表示ができなくなっております。
はじめまして。画像置換を探していて貴サイトへ辿り着きました。
シンプルでjsに疎い私でも実装できました。ありがとうございます。
ひとつ質問なのですが、マウスオーバーした時にサムネイルも画像置換することは出来ますでしょうか。
ご教授いただけると嬉しいです。
よろしくお願いいたします。
niin さん >
暇が出来たら確認後修正して再アップしますのでお待ちください。
haruri さん >
単純にマウスオーバーのアクションをつけるならCSSで出来ますよ。
http://css-eblog.com/csstechnique/dkir.html
ご教授ありがとうございました。
早速試してみます！
ステキなサイトありがとうございます。
ご質問なのですが、サムネイル画像（右の小さい画像）で、
本体（左の大きい画像）が切り替わるときに、
サムネイル画像に登録してある、
「ＵＲＬ」を本体にも適用するにはどうしたらいいでしょうか？
サムネイル画像のＵＲＬが本体にも適用になり、
自動的に切り替わるというイメージです。
お手数をお掛け致しますが、よろしくお願いいたします。
monio さん >
サムネイルのaタグを取得→href属性取得→画像置換と同じ要領で大きい画像のhrefにセット
という感じで出来ます。
正直jQueryとかMooToolsとかを使う方が早いと思いますが
サンプルご希望でしたら元になるバージョンを教えてください。
早速のレスありがとうございます。
感じとしてはＨＴＭＬとＣＳＳは分かるのですが、
javaスクリプトに関しては全然分からずでして、
正直、jQueryとかMooToolsの違いも分かっておりません…
それぐらいは勉強してこいよ！とのお叱りも最もです。
なので、シンプルな形状であれば、
それに規準させて頂きたいと思います。
また、もう一つ甘えさせていただくならば、
時間変動（10秒後）とかでサムネイルが切り替わると、
本体（大スクリーン）も切り替わればと思うのですが…
monio さん >
リンクの件は前のコメントで書いた手順を辿れば100%出来ますが、javascript未経験だと難しいかもしれませんね…
>時間変動（10秒後）とかでサムネイルが切り替わると、本体（大スクリーン）も切り替わればと思うのですが…
これはつまりスライドショーにしたいということでしょうか？
Javaスクリプトの勉強を軽くはしたのですが、
なかなか「動的」な部分を丁寧に説明してくれる
サイトがなくて苦戦してまして・・・
ただ、こちらはソースがあって、非常に分かりやすく、
勉強させていただきます。
＞スライドショー
まさにそのとおりです。時間で動作してくれれば、
「動的」な部分で人目を引けると思っております。
jQuery版ですが、IE7ではマウスオーバーするたびに fadeIn が効いたり効かなかったりするようです。
いつも参考にさせていただいております。
ひとつ質問させていただきたいのですが、
サムネールにロールオーバーしたあと、
ロールアウトすることで、大きな画像を最初の状態に戻るようにできますでしょうか？
大きな画像A（最初の状態）
↓
サムネールBにロールオーバー
↓
大きな画像Bがフェードイン
↓
サムネールエリアからロールアウト
↓
大きな画像Aに戻る
といった感じです。
可能でしたら教えてください。
よろしくお願いいたします。
はじめまして。
画像の切り替えでこちらのサイトにたどり着きました。
jQuery版を使用したくおもっているのですが、
サムネイルだけでなく、サムネイルによって切り替わった大きな画像にも
リンクをつけたいと思っています。
上記で同様の質問をされている方がいらっしゃいますが、
少し意味がわからなくて、、、
サムネイル02にマウスオーバーしたら大きな画像02にもリンクをつけたいと思っています。
恐れ入りますがご教授の程よろしくお願いします。