久しぶりにJavaScript（jQueryを使わずに）でロールオーバーを書いてみた。[js]

超絶久しぶりに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.画像の拡張子

デモも載せずに不親切な記事ですが、もし、『これはいい！！』と、思ったらご参考ください。