JavaScript Tips ロールオーバー

ごく普通のロールオーバーです。ImgPreloadの呼出を増やせば、いくつでも増やせます。

サンプル

JavaScriptソース

<script language="JavaScript" type="text/javascript">
<!--
// イメージ用配列
var SwImg; SwImg = new Array;

// 画像の先読み ImgPreload('imgタグのid', '通常の画像のパス', 'マウスオーバー時の画像のパス')
ImgPreload('Sample', 'Image/Sample1.gif', 'Image/Sample2.gif');

/* 画像プリロード */
function ImgPreload() {
	var N = ImgPreload.arguments[0];
	SwImg[N] = new Image();
	SwImg[N][0] = new Image();
	SwImg[N][0].src = ImgPreload.arguments[1];
	SwImg[N][1] = new Image();
	SwImg[N][1].src = ImgPreload.arguments[2];
}

/* ロールオーバー */
function ImgChenge() {
	var ID = ImgChenge.arguments[0];
	var N  = ImgChenge.arguments[1];
	document.images[ID].src = SwImg[ID][N].src;
}

//  -->
</script>

HTMLソース

<a href="Tips01.htm" onmouseout="ImgChenge('Sample', 0)" onmouseover="ImgChenge('Sample', 1)">
<img src="Image/Sample1.gif" width="188" height="27" name="Sample" id="Sample" /></a>

onmouseoutおよびonmouseoverのイベントでImgChengeを呼び出します。
ImgChenge('imgタグのid', 呼び出す画像の番号)
画像の番号は0が通常の画像で1がマウスオーバー時の画像です。
imgタグにはidが必要です。