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

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

ロールオーバーイメージ

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

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

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

JavaScript ファイルの読み込み

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

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

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

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

この記事のカテゴリー一覧を見る⇒Javascript関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/136

トラックバック

マウスオーバーによる画像切替を簡単に実現する

Wordpressに限った話ではないですが、メニューなどでよく使われるマウスオーバーによる画像切替を簡単に行うためにどうするかを調査。nCSSで実現する...

byadrufの目指せ鯖缶 2009年11月23日 23:17

コメント

1 - HAPPY*TRAP さん

はじめまして。
rollover.jsを使わせていただいてます。
大変便利です!有益なスクリプトを公開してくださいまして、
ありがとうございました。

2010年2月13日 22:33

2 - えど Author Profile Pageさん

>>1 - HAPPY*TRAP さん
コメントありがとうございます!
もともとは自分もめんどくさいなーと思って作ったものなのでお役に立てたようでよかったですw

2010年2月15日 12:15