画像置換がいらないシンプルなロールオーバーエフェクト用Javascriptライブラリ

カテゴリ:Javascript関連 2009年2月25日 14:10

さて、またしても JavaScript の記事です・・。
今回、このライブラリを作成した理由として、マウスーバー時の画像と、通常時の画像の 2 種類を用意することに手間を感じたためです。n

ちょっとしたバナー等だとわざわざマウスオーバー時に画像を入れ替えるほどのモノでもないし、でもリンクしているって分かってもらうために何かしらのエフェクトを入れたい・・・というような場合に使えるライブラリとなっています。n

画像置換がいらないシンプルなロールオーバーエフェクト デモ

使い方は簡単です。まず、以下の JS ファイルを読み込ませ、ロールオーバーエフェクトを実装したい img 要素のクラス名にsimplerolloverを指定するだけです。n

JS ファイル

オプションとして、JS ファイルの読み込み時に

と border と color の二つのパラメータを渡すことで、それぞれ枠の太さと色を指定することができます。(もちろん、どちらか一方だけの指定でも大丈夫です)n

指定できる値は CSS で指定するものと同じものが使えます。(例:#f00など)
border への指定は 整数値のみ指定が可能です。n

動作確認:IE6, IE7, Firefox2, Firefox3, Safari, Opera

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

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

トラックバックURL

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