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

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

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

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

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

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

オプションとして、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

1 - ちぢみさん

はじめまして。
ミクシィからこちらにたどり着きました。
今回こちらのシンプルロールオーバーを使わせて頂こうと設置をしました。

IE7で確認をすると、ロールオーバー時の外枠が全然違うところで現れます。
Ｓａｆａｒｉ、Ｆｉｅｒｆｏｘ（Ｗｉｎ）では問題なく表示されたのですが、設置の方法が間違っていたのでしょうか？

初心者の私にも分り易い説明で、とても魅力的な技が多いので、今後もよろしくお願いします。

2010年7月26日 12:54