一時期はjavascriptは敬遠されcssによるロールオーバーが多かったと思うけど、ここんとこAjaxの攻勢によりjavascriptが見直されているなか、ページ内に色々な動きをつけるために複数のjavascriptファイルをかませることって非常に多い。
javascriptをいちから簡単にすらすっらとかけるヒトはいいけど、javascriptはソースをひっぱってきて使うっていうことが多々ある。
そんなときにこまるのが、それぞれのjavascriptファイルがお互いに干渉して一方が動かなくなったりしてげんなりすることってありません？
そんなわけで、同じ動きを実現するにもいくつかの違うjavascriptがあると便利。
さしかえて検討できます。
ということで、画像のロールオーバーを実現するjavascriptをまとめました。
といっても今回は２こだけだけど。
ひとつめ。
head内で<script type="text/javascript" src="Rollover01.js"></script>
でjsを読み込ませて、ロールオーバーさせる画像のファイル名の最後に「_off」。ロールオーバーした時の画像のファイル名の最後に「_on」とする。
ふたつめ。
head内で<script type="text/javascript" src="Rollover02.js"></script>
ロールオーバーした時の画像のファイル名の最後に「_on」とし、ロールオーバーさせる画像のいmgタグに「class="imgover"」とクラス属性を追加。
例）<img src="common/img/btn_main01.gif" alt="mail01" width="53" height="20" border="0" class="imgover" />
どちらもわりとシンプルなjsファイルなんでいいと思います。
なお、ソースは自己責任で使用してください。