手軽に画像のロールオーバー効果を実装するJavaScript

カテゴリ：Javascript関連 2009年4月14日 10:48

ロールオーバーイメージ

これは、以前に公開していたスクリプトの改善版です。
以前の記事：画像のロールオーバーを自動化するJavascript では、実行するために body 要素に onload で関数を指定する必要がありましたが、こちらは読み込ませるだけで実行されます。

以前から、~~自分で作ったくせに~~ いちいち body 要素に onload を指定するのがめんどくさいなーと思っていたので、それを作りなおしました。

手軽に画像のロールオーバー効果を実装するJavaScript デモ

http://css-eblog.com/eblog_sample/0904/rollover-js/

JavaScript ファイルの読み込み

人によってはロールオーバー用の画像のファイル名に_on以外をつけている人もいると思いますので（たとえばimg_over.gifみたいな）、URL 引数にパラメータを渡すことでロールオーバー用画像のタイプを設定できるようにしました。
読み込み時に以下のようにすることで、どんなファイルを読み込むかを指定できます。

上記の?type=_overの部分がパラメータです。
こうすることで、たとえば通常時の画像のファイル名がimg.gifだったとすると、ロールオーバー時にimg_over.gifが読み込まれることになります。

デフォルトの設定では_onがついた画像を表示します。
もしロールオーバー用の画像のファイル名を_on以外で使っている場合は、上記のようにパラメータを設定してください。

HTML 側の指定は、ロールオーバーを実装させたい img 要素に対してclass="rollover"とクラスを指定するだけです。
クラスを指定した画像のロールオーバー（マウスオーバー）時に、画像の URL を読み取り、JS 読み込み時に設定したパラメータ（もしくは初期値）を利用してロールオーバー用の画像と差し替えます。