<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- var img = new Image(); // 念のためキャッシュに入れておきます img.src = "./on.gif"; // img.src = "???" に画像のパスを入れます img.src = "./off.gif"; // 必要ない場合はこの部分は削除してください function pic(id, image) { document.images[id].src = image; document.images[id].alt = image; } // --> </script> </head> <body> <a href="../index.html" onmouseover="pic('id0', 'on.gif');" onmouseout="pic('id0', 'off.gif');"> <img src="./off.gif" border="0" alt="off.gif" id="id0"> BACK</a><br> <a href="../../index.html" onmouseover="pic('id1', 'on.gif');" onmouseout="pic('id1', 'off.gif');"> <img src="./off.gif" border="0" alt="off.gif" id="id1"> HOME</a> </body> </html>
BACK HOME
差し替える画像に id または name 属性を指定しておいてください。この指定した id 属性の画像を入れ替えます。
アンカーにある onmouseover と onmouseout の関数 pic の1番目の引数には画像の id 名を入れます。これはスクリプト内の document.images[id] の id の部分に代入されます。
リンクに触れた時に表示する画像のファイル名を onmouseover の2番目の引数に指定してください。次にリンクから離れた時に表示する画像のファイル名（元の画像）を onmouseout の2番目の引数に指定してください。元の画像と onmouseout で表示される画像は同一のファイルにしてください。
この例では、リンク先に触れると 
(on.gif) が表示され、離れると (off.gif) が表示されます。