赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名
<a href="javascript:;" onMouseOver="msg(0)" onMouseOut="msg(1)"><img name="image" src="enter.gif" width="100" height="50" border="0"></a> <script type="text/javascript"> icon = new Array(); //*1
icon[0] = new Image(100,50); //*2 icon[1] = new Image(100,50); icon[0].src = "go.gif"; //*3 icon[1].src = "enter2.gif"; //*4 function msg(num) { document.image.src = icon[num].src; //*5 } </script>
３種類の画像をマウスの状態に応じて切り替えています。
「ENTER」は最初の表示に使用しています。最初の表示には<img>タグでそのまま記述しています。この時、<img>タグに「G01」という名前が付いていることが重要です。スクリプトではこの名前を使って変更する画像の場所を特定しています。
また、最初に表示する画像には<a>タグを付けてリンクが機能していますが、そこにonMouseOverとonMouseOutという２つのイベント処理があります。これによって、<a>～</a>の間にマウスが来ると、イベントが発生するのです。
イベント処理は次の２つです。「ENTER」にマウスを重ねる（onMouseOver）と画像は「GO!!」に変わり、マウスを外す（onMouseOut）と「ENTER」に変わります。
今回は最初状態と違うことを示すために、「ENTER」を使っていますが、「ENTER」を使えば画像が元に戻ったように見えます。
次にスクリプトの流れを確認しましょう。
（*1）配列変数iconを設定しています。ここで、画像を入れるための入れ物が複数必要ですので、配列変数で不特定数の関数を一度で作ってしまいます。
（*2）次にその入れ物に画像を入れるため、変数を画像のデータ形式に指定します。このとき、画像の大きさも指示します。
次の行と合わせて、変数icon[0] と変数icon[2] という２つの入れ物を作りました。
（*3）変数icon[0]に画像「GO!!」を入れるため、ファイル名を「go.gif」としています。
（*4）変数icon[1]に画像「ENTER」を入れるため、ファイル名を「enter2.gif」としています。
（*3）（*4）のそれぞれこの段階でブラウザが画像を読み込みます。
あとは、イベント発生時にユーザー変数msg()が機能します。その流れはこうです。
マウスをリンクに重ねたとき（onMouseOver）、msg()には「0」が送られます。これを変数numで受け取っています。
（*5）変数icon[num]はicon[0]と同じになりますので、画像「GO!!」が表示されます。
マウスをリンクから外したとき（onMouseOut）は、msg()には「1」が送られますので、（*5）では変数icon[1]に入った画像「ENTER」が表示されます。
<a>と<img>は同時に使われていますが、その役割は別になっています。
<a>はマウスの状態を判別し、その結果として<img>は画像を表示しています。
この場合、それぞれを別の位置で機能させることも可能です。
<image name="image" src="enter.gif" width="100" height="50" border="0"> <a href="javascript:;" onMouseOver="msg(0)" onMouseOut="msg(1)">ここにマウスを</a>