複数のイメージ切り換えボタン

赤字:JavaScriptの命令や重要なタグ/青字:用途に応じて変更する部分/緑字:変更可能な変数名やユーザー関数名


戻る

実例

例文

<a href="javascript:;" onMouseOver="msg2(0,0)" onMouseOut="msg2(0,1)"><image id="image0" src="enter.gif" width="100" height="50" border="0"></a> 
<a href="javascript:;" onMouseOver="msg2(1,0)" onMouseOut="msg2(1,1)"><image id="image1" src="ice_white.gif" width="32" height="32" border="0"></a> 
<a href="javascript:;" onMouseOver="msg2(2,0)" onMouseOut="msg2(2,1)"><image id="image2" src="ice_choco.gif" width="32" height="32" border="0"></a>

<script type="text/javascript">
icon = new Array(); //*1

for (n=0;n<3;n++) { //*2
	icon[n] = new Array(); //*3
	icon[n][0] = new Image(); //*4
	icon[n][1] = new Image();
	}
}

icon[0][0].src = "go.gif"; //*5
icon[0][1].src = "enter.gif"; icon[1][0].src = "ice_pink.gif";
icon[1][1].src = "ice_white.gif"; icon[2][0].src = "ice_blue.gif";
icon[2][1].src = "ice_green.gif"; function msg2(num,onoff) { document.getElementById("image"+num).src = icon[num][onoff].src; //*6
} <script>

解説

複数の位置と複数の画像を切り替えるため、配列変数を二重化し、<img>タグにはnameの代わりにidを使っています。

まず、nameの代わりにidを使っているのは、画像を呼び出すときに名前を合成して作るためです。(*6)のgetElementByIdのところで「"image"+num」としています。変数numで何番目の画像か指示し、これがidの一部となっています。
配列変数を二重化したのも、画像の呼び出し命令(*6)を1つにまとめるためです。こちらは「icon[num][onoff]」にある変数onoffで決めています。

それではスクリプト内の(*1)~(*5)までの流れを見てみましょう。
(*1)で配列変数iconを準備します。
(*2)画像は3個所に表示しますので、関数forを使って3回次の処理を繰り返します。仮に変数nを用意して、処理を繰り返す毎に0から2まで中身を入れ替えて処理をします。
(*3)ここで配列変数を二重化しています。icon[0]という変数をicon[0][0]とicon[0][1]に分けて、マウスが重なったときと外れたとき(元の画像)の2種類の画像を入れるためです。
(*4)n=0の場合、icon[0][0]を画像形式にします。次の行では、icon[0][1]を画像形式にします。
(*5)ここからの6行は、(*3)の繰り返し処理で作られた6つの変数に各画像を割り当てています。最初の配列は画像の位置を、次の配列は画像の状態を示すので、それに応じた画像を用意します。
ここまでがイベント処理前の準備段階です。

では、イベント発生時の動作を見てみましょう。
1番目の画像にマウスを重ねると、<a>タグ内のonMouseOverがイベント処理を行い、ユーザー関数msg2に対し、2つの値を引き渡します。ここでは「0,0」となっています。
1つ目の値は変数numに、2つ目の値は変数onoffが受け取ります。
(*6)変数numを使って、画像の位置をid「image0」と決定します。そこに変数icon[0][0]を入れています。これで画像が入れ替わりました。ここで「.src」と付いているのは、画像のURLを示しています。
次に、マウスを画像の上から外すと、今度はonMouseOutが発生し、ユーザー関数msg2には「0,1」という値が送られます。
(*6)変数numは「0」ですから、画像の位置はid「image0」です。変数onoffは「1」なので、icon[0][1]の画像に切り替わります。

<a>タグのリンク先が「javascript:;」となっているのはリンクを機能させないためです。

応用

表示したい画像が増えた場合、関数for内の「n<3」の部分を変更します。これは3未満という意味なので上限「2」という意味になります。画像が5個所に増えたら「6」にすれば良いのです。
あとは、画像を1つ1つ、配列変数に入れてやりましょう。

戻る