マウスを乗せると画像が変化する(複数設置)方法

ホーム > JavaScript > マウスを乗せると画像が変化する(複数設置)方法

■説明

　マウスが画像の上を通過した時に違う画像に変化することが出来ます。
　当然ながら乗った時と乗る前の画像を2つ用意しなければなりません。以下の画像は「Image1.jpg」～「Image4.jpg」を使用しています。

ImageChange関数の説明
　・第1引数には、変えたい画像の<IMG>タグで指定しているNAME属性の値を設定します。
　・第2引数には、ユーザが設定する部分のimagefile変数で指定したファイル名の番号(添え字)を指定します。例えば、Image1.jpgを指定する場合は、1を設定します。Image3.jpgを指定する場合には、3を設定します。

■ソース

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>マウスを乗せると画像が変化する(複数設置)方法</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
//――――――――――――――――――――――――――――――――――――――
// 作成者:るび～  ACCESS R  http://www5e.biglobe.ne.jp/~access_r/
//――――――――――――――――――――――――――――――――――――――

//――――――――――――――――――――――――――――――――――――――
// ユーザが設定する部分はここから！！
//――――――――――――――――――――――――――――――――――――――
	//画像のファイル名を指定して下さい
	//奇数番は、変化前の画像。偶数番は、変化後の画像となります。
var imagefile = new Array("Image1.jpg", "Image2.jpg", "Image3.jpg", "Image4.jpg");
//――――――――――――――――――――――――――――――――――――――
// ユーザが設定する部分はここまで！！
//――――――――――――――――――――――――――――――――――――――
var count;
	//画像をキャッシュします
var image = new Array(imagefile.length);
for(count = 0; count < (imagefile.length - 1); count++){
	image[count] = new Image();
	image[count].src = imagefile[count];
}

function ImageChange(id, kind){
	window.document.images[id].src  = imagefile[kind - 1];	//画像を変更する
}
//-->
</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>

■実行例

■対応ブラウザ

マウスを乗せると画像が変化する(複数設置)方法
IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6
●	●	●	●	●	●	●	●	●	●

[ホーム] [JavaScript] [↑ページ最上部へ戻る]

Webマスター、HP作成のプロとして活躍したい方は見てください。
ホームページの開設数が増加し、Web業界や一般企業でWebマスターが急激に求められています。Webマスターの絶対数の不足している今が、技能習得の絶好のチャンスです。