赤字：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）を１つにまとめるためです。こちらは「icon[num][onoff]」にある変数onoffで決めています。
それではスクリプト内の（*1）～（*5）までの流れを見てみましょう。
（*1）で配列変数iconを準備します。
（*2）画像は３個所に表示しますので、関数forを使って３回次の処理を繰り返します。仮に変数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）の繰り返し処理で作られた６つの変数に各画像を割り当てています。最初の配列は画像の位置を、次の配列は画像の状態を示すので、それに応じた画像を用意します。
ここまでがイベント処理前の準備段階です。
では、イベント発生時の動作を見てみましょう。
1番目の画像にマウスを重ねると、<a>タグ内のonMouseOverがイベント処理を行い、ユーザー関数msg2に対し、２つの値を引き渡します。ここでは「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」にすれば良いのです。
あとは、画像を１つ１つ、配列変数に入れてやりましょう。