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

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

シンプル版


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

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

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

[js]ロールオーバー+見てるページのメニュー画像変更

メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。

見てるページのメニュースタイルを変更する
ロールオーバースクリプト(画像名のOn/Offで判別)を足したソースです。
プリロードはついてません。


続きを読む ロールオーバー+見てるページのメニュー画像変更

[JS]ロールオーバースクリプト(画像名のOn/Offで判別)

前の記事はオーバーの画像だけonを追加するものだったが、
この記事ではオーバーの画像にON、アウトの画像にOFFをつけて、ONとOFFの部分だけで判別する。

ページ内の画像でoffが付いてるもの全てロールオーバーさせる、ということも可能。

続きを読む [JS]ロールオーバースクリプト(画像名のOn/Offで判別)

[JS]ロールオーバースクリプト(ソース変更なし)

HTML側の変更なしで、メニュー内の画像を全部ロールオーバーさせるスクリプトを作ってみた。
relにしろclassにしろイベントハンドラにしろ、ロールオーバーさせるためだけに追加するのは嫌、という時に良いかも。

続きを読む [JS]ロールオーバースクリプト(ソース変更なし)