まずは何はなくともJSを読み込む

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

次にロールオーバーさせたい画像か親要素にclass:rolloverを付与。

<img src="images/hoge_off.gif" width="10" height="10" alt="hoge" class="rollover">
<ul id="gNavi" class="rollover">
<li><img src="images/hoge_off.gif" width="10" height="10" alt="hoge"></li>
<li><img src="images/hoge_off.gif" width="10" height="10" alt="hoge"></li>
<li><img src="images/hoge_off.gif" width="10" height="10" alt="hoge"></li>
</ul>

親要素でもOKってのはグローバルナビとかだと画像は全部ロールオーバーすることがかなりあるため、1つずつクラス付けるのがめんどーだからです。

ロールオーバーさせる画像の名前の最後に「_off」をつける。
マウスオン時に表示させる画像には「_on」をつける。

以上！備忘録書くまでもないですね。ちなみに画像の先読みも発動

対象ブラウザ

• WindowsIE6,7
• Firefox2以上
• Opera9.25以上
• Safari2以上

サンプルページ

ソース

(function(){
	var over = function(){
		var rollObj = getElementsByClassName("rollover");
		var pre = [];
		var imgObj = [];
		for(var i = 0, l = rollObj.length ; i < l; i++){
			if(rollObj[i].src && rollObj[i].src.match("_off.")){
				imgObj[imgObj.length] = rollObj[i];
			}else{
				var childImg = rollObj[i].getElementsByTagName("img");
				for(var j = 0, jl = childImg.length; j < jl; j++){
					if(childImg[j].src.match("_off.")){
						imgObj[imgObj.length] = childImg[j];
					}
				}
			}
		}
		for(var i = 0, l = imgObj.length; i < l; i++){
			pre[i] = document.createElement("img");
			pre[i].src = imgObj[i].src.replace("_off.","_on.");
			addEvent(imgObj[i],"mouseover",switchFn);
			addEvent(imgObj[i],"mouseout",switchFn);
		}
		function switchFn(){
			this.src = this.src.match("_off.") ? this.src.replace("_off.","_on.") : this.src.replace("_on." , "_off.");
		}
	}
	var addEvent = (function() {
		if ( window.addEventListener ) {
			return function(el, type, fn) {
				el.addEventListener(type, fn, false);
			};
		} else if ( window.attachEvent ) {
			return function(el, type, fn) {
				var f = function() {
					fn.call(el, window.event);
				};
				el.attachEvent("on"+type, f);
			};
		} else {
			return function(el, type, fn) {
				el["on"+type] = fn;
			};
		}
	})();
	function getElementsByClassName(className, pElement, tagName){
		var d = document, nodes = [], item;
		var cls, items = (pElement || d).getElementsByTagName((tagName || "*"));
		for(var i = 0, l = items.length; i < l; i++){
			item = items[i];
			if(item.className){
				cls = item.className.split(/\s+/);
				for(var k = 0, kl = cls.length; k < kl; k++){
					if(cls[k]==className){
					nodes[nodes.length] = item; break;
					}
				}
			}
		}
		return nodes.length > 0 ? nodes : null;
	}
	addEvent(window,"load",over);
})();

ロールオーバー程度でソース長すぎなｷｶﾞｽ。

こんな感じで自作のJSをネタの続く限り投稿していきます。ほかに書くことがないから！というのもあるけど、自分用のメモという含みもあったりなかったり。