画像のロールオーバーを自動化するJavascript

カテゴリ:Javascript小技 2008年4月24日 09:44

画像のロールオーバー(マウスオーバー)での処理を実現する JavaScript を新しく作り直しました。body 要素に対して onload を指定せずにスクリプトを読み込むだけで動作するようにしてあります。
手軽に画像のロールオーバー効果を実装するJavaScript

さて、ちょっと仕事で簡単なJavascriptを作る機会があったのでそれを公開してみる。
(記事が最近全然書けてなかったから間に合わせってわけじゃありません・・たぶん)n

最近たまに思うのが、CSS で無理にロールオーバーを実装しなくてもいいんじゃないか、ということ。
背景だけを変更する、とかならむしろ CSS が最適解なんだと思うのだけど、テキストごと置換してしまうような場合は JavaScript のほうが手軽だし、alt も効くしいいのかなと。
JavaScript オフの人に対しては動きがなくなるけど、むしろオフの人はそういう動きを嫌っているのだからロールオーバーの効果がなくても問題ないのかなと。n

Javascriptオフの場合にレイアウトが大幅に崩れてしまうような使い方は NG だと思うけど、ちょっとした利便性のための効果、くらいならJavascriptで実装してもいいと思う。n

さて、前置きが長くなりましたが、作成したサンプルはこちらです。

画像のロールオーバーを自動化する Javascript デモ

ダウンロード

実装は簡単で、javaScript を読み込ませて body の onload でスクリプトを実行するだけで、指定のクラス名がついた画像に対してロールオーバーの処理を自動で付与する、というものです。n

▼EntryMore▼

JavaScript を読み込む

JavaScript を実行する

オプション

オプションとして、imgRollOverSet に文字列(サンプルでは「_over」)を設定すると、指定された画像のURL の後ろに「_over」を追加した画像を探して表示します。
※デフォルトでは「_on」が設定されています。

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

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

トラックバックURL

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