// ロールオーバーするスクリプトです
// 画像のファイル名に指定した接尾辞が入ってると、その接尾辞がマウスオーバー用の接尾辞に変わって画像が変わります
// 接尾辞は初期設定では通常時は_off、マウスオーバー時は_onになってます
// たとえば、hoge_off.jpgという画像ファイルがあるとマウスオーバー時はhoge_on.jpgに切り替わります
// ヘッダーとかで読み込むだけでロールオーバーするようになります

var rollover = function(){

	//接尾辞の設定
	var offSuffix = "_off"; //通常時
	var onSuffix  = "_on";  //マウスオーバー時

	//img要素を取得
	var img = document.images;

	//取得したimg要素それぞれに以下を実行
	for(i=0;i<img.length;i++){

		//img要素のsrcから、画像ファイルの位置、画像ファイル名（拡張子抜き）、画像の拡張子に分解
		var imgFileLocation  = img[i].src.substring(0,img[i].src.lastIndexOf("/")+1);
		var imgFileName      = img[i].src.substring(img[i].src.lastIndexOf("/")+1,img[i].src.lastIndexOf("."));
		var imgFileExtension = img[i].src.substring(img[i].src.lastIndexOf("."));

		//画像ファイル名の最後に通常時の接尾辞があるimg要素にロールオーバーを実装
		//----------------------------------------------------------------------
		//【判定の方法の解説】
		//右辺は
		//拡張子抜き画像ファイル名の最後に接尾辞文字列があれば、接尾辞文字数と同じ数を返すのでtrue
		//拡張子抜き画像ファイル名に接尾辞文字列があっても最後じゃなければ、接尾辞文字数より大きい数を返すのでfalse
		//拡張子抜き画像ファイル名に接尾辞文字列がなければ、-1を返すのでfalse
		//----------------------------------------------------------------------
		if(imgFileName.length-imgFileName.lastIndexOf(offSuffix)==offSuffix.length){

			//ロールオーバーを実装するイメージ要素に通常時とマウスオーバー時のイメージを記憶させる
			img[i].offImage = new Image;
			img[i].onImage  = new Image;
			img[i].offImage.src = img[i].src;
			img[i].onImage.src  = imgFileLocation + imgFileName.substring(0,imgFileName.lastIndexOf(offSuffix)) + onSuffix + imgFileExtension;

			//IE以外
			if(img[i].addEventListener){
				//img要素にmouseoverイベントでimg要素のsrcをonImage.srcに
				img[i].addEventListener("mouseover", function(){
					this.setAttribute("src",this.onImage.src);
				},false);
				//img要素にmouseoutイベントでimg要素のsrcをoffImage.srcに
				img[i].addEventListener("mouseout", function(){
					this.setAttribute("src",this.offImage.src);
				},false);
			}
			//IEの場合
			else if(img[i].attachEvent){
				//img要素にmouseoverイベントでimg要素のsrcをonImage.srcに
				img[i].attachEvent("onmouseover", function(){
					event.srcElement.setAttribute("src",event.srcElement.onImage.src);
				});
				//img要素にmouseoutイベントでimg要素のsrcをoffImage.srcに
				img[i].attachEvent("onmouseout", function(){
					event.srcElement.setAttribute("src",event.srcElement.offImage.src);
				});
			}
		}
	}
}

//window.onloadでrolloverの関数を実行
if(window.addEventListener){
	window.addEventListener("load",rollover, false);
}else if(window.attachEvent){
	window.attachEvent("onload",rollover);
}