rollover.js

概略

シンプルなロールオーバーJavaScriptです。

• test_off.png にマウスオーバーすると test_on.png に切り替わります。
• マウスアウトすると test_off.png に戻ります。

ダウンロード

• rollover.js
• gist: 651306 (rollover.js) - GitHub

使い方

rollover.js を外部スクリプトに指定します。

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

_off を含むファイル名の画像ファイルを用意し、<img> でマークアップします。

<p><img src="sample1_off.png" alt="sample1" /></p>
<p><img src="sample2_off.png" alt="sample2" /></p>
<p><img src="sample3_off.png" alt="sample3" /></p>
<p><img src="sample4_off.png" alt="sample4" /></p>

サンプル

画像ファイルは用意していないので、開発者ツールでsrc属性値が切り替わっていることを確認してください。

参考URL

DOM

• インタフェース MouseEvent - DOM L2 Events
• 1.3 イベントリスナ登録 - DOM L2 Event

その他

• ソースがシンプルなJSによるロールオーバー - CSS HappyLife