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

2009-04-14 10:48:41

ロールオーバーイメージ

これは、以前に公開していたスクリプトの改善版です。
以前の記事:画像のロールオーバーを自動化する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 読み込み時に設定したパラメータ(もしくは初期値)を利用してロールオーバー用の画像と差し替えます。

rollover.js ダウンロード

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]