最小限なJavaScriptによる画像置換

JavaScriptによる画像置換を実現させます。

• window.onloadを複数行えるよう実行をaddEventListenerで追加
• htmlに手を加えるのは、「class="changeimg"」をつけるだけ。(クラス名"changeimg"再考の必要あり)
• 置換する画像は「元ファイル」+「-over」+「.拡張子」の形式で、元ファイルと同じフォルダに入れておくだけ
• 置換画像を事前に読み込み(preload)

対象：IE5〜、Mozilla、Opera
(対象外：IE4以下、NN4など)

TODO：

• classが複数のとき動作しない。(class="changeimg foo")

→文字列検索 or 正規表現

◆参考
マウスオーバー時の画像置換 ::: tk1975 :::
Standards Compliant Rollover Script Daniel Nolan

使い方

<!-- 〜略〜 -->

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

<!-- 〜略〜 -->

<img src="../images/foo.gif" class="changeimg" />

<!-- 〜略〜 -->

/**
 * window.onload promotion
 * @param func   function
 * 
 * html:
 * <script type="text/javascript" src="foo.js"></script>
 * javascript:
 * windowAddEvent(function(){ alert('window is loaded.') });
 *
 */
function windowAddEvent(func){
	if (window.addEventListener) { //for W3C DOM
		window.addEventListener("load", func, false);
	} else if (window.attachEvent) { //for IE
		window.attachEvent("onload", func);
	}
}

/**
 * new image load
 * @param src   images source
 * @return obj  object HTMLImageElement
 *
 * javascript:
 * newImage('./images/foo.gif');
 *
 */

function newImage(src) {
	if (document.images) {
		var obj = new Image();
		obj.src = src;
		return obj;
	} else {
		return false;
	}
}

/**
 * Aタグ内に特定のクラスを持つ画像について、
 * 画像置換を設置する。
 * 
 */

function addChangeImageEvent(){

	var addFileNameRule = '-over';     //画像置換のファイル規則 例) foo.gif ←→ foo-over.gif
	var className       = 'changeimg'; //画像置換を設置するAタグのクラス名

	//ブラウザ判定 サポート：IE5〜、Mozilla、Opera
	if(!document.getElementById) return false;
	//画像置換するimgタグの有無
	if(document.getElementsByTagName("img")){
		var TagNameA = document.getElementsByTagName('img');
	} else {
		return false;
	}

	var TagNameACount = TagNameA.length;
	if(TagNameACount < 0 ) return false;
	for (var i = 0; i < TagNameACount; i++){
		if (TagNameA[i].className == className) {
			newImage(TagNameA[i].getAttribute('src'));
			TagNameA[i].onmouseover = function() {
				var onmouseoverSrc = this.getAttribute("src");
				var ext = onmouseoverSrc.substring(onmouseoverSrc.lastIndexOf('.'), onmouseoverSrc.length);
				this.setAttribute('src', onmouseoverSrc.replace(ext, addFileNameRule + ext));
			};
			TagNameA[i].onmouseout = function() {
				var onmouseoutSrc = this.getAttribute("src");
				var ext = onmouseoutSrc.substring(onmouseoutSrc.lastIndexOf('.'), onmouseoutSrc.length);
				this.setAttribute('src', onmouseoutSrc.replace(addFileNameRule + ext,ext));
			};
		}
	}
	return true;
}


//Aタグ内に特定のクラスを持つ画像について、マウスオーバー/アウトによる画像置換を設置する。
windowAddEvent(function(){addChangeImageEvent()});