複数の位置と複数の画像を切り替えるため、配列変数を二重化し、<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つ、配列変数に入れてやりましょう。