ロールオーバーを簡単に実装する-Image Rollover Code-

Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。

設置方法

配布元のDaniel Nolanのサイトよりrollover.jsを取得し、head要素内などで読み込みます。

<script src="rollover.js" type="text/javascript"></script>

ロールオーバーを実装したいimg要素のclass名に『imgover』を指定します。

<img src="sample.jpg" alt="Some Image" class="imgover" />

すでに、他のclass名がつけられている場合は、半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。

<img src="sample.jpg" alt="Some Image" class="default imgover" />

img要素の画像と同じディレクリにsmple_o.jpgのように、元の画像のファイル名と拡張子の間に『_o』を付けたファイル名でロールオーバー用の画像を置きます。
(rollover.gifならrollover_o.gifというファイル名で)

これで設置は完了です。

img要素の上にマウスをのせれば画像が切り替わります。

サンプル

onload記法の変更

Image Rollover Codeは実行の際にonloadイベントを利用している為、他のライブラリとバッティングする可能性があります。

38行目の

window.onload = initRollovers;

を以下のように書きかえることにより他のライブラリとバッティングせず使用する事が可能になります。

try{
	window.addEventListener("load",initRollovers,false);
}catch(e){
	window.attachEvent("onload",initRollovers);
}

サンプル

ライセンス

ライセンスが不明ですので利用する際には注意が必要です。

関連エントリー

画像置換
画像置換でメニューを作る
画像置換に関する考え方
BIR-もうひとつの画像置換
一番簡単な画像置換の方法-imageReplace.js-

スポンサードリンク

«躍進するGoogleと○○ | メイン | 関連キーワードを探すキーワードアドバイスツールα»