簡単ロールオーバーイメージ

機能説明

マウスをイメージ画像に乗せたとき、そのイメージ画像を別の画像にロールオーバーします。
Adobe Dreamweaver 等でも用意されていますが、HTMLソースの HEAD や BODY 内に javascript がいろいろと書き込まれてしまいソースがごちゃごちゃするので、もっと綺麗にならないかなぁ・・・ってことで用意してみました。
「_off」と「_over」という名前が含まれるイメージファイルを二つ用意します。
「_off」が通常のイメージとなり、マウスオーバーすると「_over」のイメージファイルに入れ変わります。
マウスを外すと「_off」の画像に戻ります。
Ex.) イメージファイル「menu1_off.gif」「 menu1_over.gif」
<img src="menu1_off.gif" alt="" />

設置ついて
<script type="text/javascript" src="rollover.js"></script>
を HTMLソース HEAD 内に置いて下さい。
※rollover.js は window.onload を使って読み込ませてますので、onload を利用する他のスクリプトを利用時はご注意下さい。
addEventListener ＆ attachEvent での読み込みに変更しました。

ダウンロード

更新

2008年6月12日
プリロードされる画像の読み込み処理とマウスボタンアップ後の処理を修正しました。

2008年12月3日
クリックした後、ロールオーバー画像のままの状態になるので、マウスクリック動作後（マウスボタンをアップした後）に解除するように修正しました。