JavaScriptでロールオーバーを簡単に実装する – rollover.js

//
window.onload = function(){
	var conf = {
		className : 'btn',	// クラス名
		postfix : '_o'		// マウスオン時の画像のファイル名
	};
	var imgNodeList = getElementsByClassName(conf.className);
	var node;
	for (var i=0, len=imgNodeList.length; i<len>
		node = imgNodeList[i];
		node.originalSrc = node.src;
		node.rolloverSrc = node.originalSrc.replace(/(.gif|.jpg|.png)/,
			conf.postfix+"$1");
		preloadImage(node.rolloverSrc);
		node.onmouseover = function() {
			this.src = this.rolloverSrc;
		};
		node.onmouseout = function() {
			this.src = this.originalSrc;
		};
	}
};
//	クラス名によるエレメントノード配列取得
function getElementsByClassName(name) {
	var elements = [];
	var allElements = document.getElementsByTagName('*');
	var re = new RegExp("(^|\s)" + name + "($|\s)");
	for (var i=0, len=allElements.length; i</len><len ;>
		if (allElements[i].className.match(re)) {
			elements.push(allElements[i]);
		}
	}
	return elements;
}
//	プリロード
preloadedImages = [];
function preloadImage(url) {
	var p = preloadedImages;
	var l = p.length;
	p[l] = new Image();
	p[l].src = url;
}