超絶久しぶりにjQueryを使わずにJavaScriptでロールオーバーを書いてみたので、ブログの小ネタとして書いときます。
(記事のタイトルを見て、本当にいろいろ大丈夫か、と思うところですが【謎】)
JavaScript
ソースコードは下記のような感じです。本当に、ググったらよく見るようなコードです。特に、コレという特徴もありません。
var rollover = { init : function() { if(!document.getElementById || !document.getElementsByTagName) return; rollover.setRollover(); }, setRollover : function() { var imgElement = document.getElementsByTagName('img'); for(var i = 0; i < imgElement.length; i++) { if(imgElement[i].className == 'rollover') { var src = imgElement[i].getAttribute('src'); imgElement[i].onmouseover = function() { this.setAttribute('src', this.getAttribute('src').replace('_n', '_o')); } imgElement[i].onmouseout = function() { this.setAttribute('src', this.getAttribute('src').replace('_o', '_n')); } } } } } if(window.addEventListener) { window.addEventListener("load", rollover.init, false); } else { window.attachEvent("onload", rollover.init); }
HTML
上記のJSコードをペーストしただけでは動きません。下記のようにimg要素にrolloverというクラスをつけてください。
<img src="pic01_n.png" alt="" width="25" height="25" class="rollover"> <img src="pic02_n.jpg" alt="" width="25" height="25" class="rollover"> <img src="pic03_n.gif" alt="" width="25" height="25" class="rollover">
画像のファイル名
さらに、上記のHTMLとJSで動作させるためには、画像のファイル名を下記のように、通常の時に"_n"、ホバー時に"_o"とします。hogeのところは共通にする必要があります。
- 通常の時:hoge_n.画像の拡張子
- ホバー時:hoge_o.画像の拡張子
デモも載せずに不親切な記事ですが、もし、『これはいい!!』と、思ったらご参考ください。
コメント