大きい画像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ファイルをまとめてあります
ダウンロード:

“ColorMe!ShopProでLightboxを使う” をダウンロード – 0 回のダウンロード –

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