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

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

配布元：Daniel Nolan
ライセンス：不明

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

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要素の上にマウスをのせれば画像が切り替わります。

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

38行目の


window.onload = initRollovers;

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


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