リンクに触れたら画像を変える(ロールオーバー)
<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>
off.gif BACK
off.gif HOME

差し替える画像に id または name 属性を指定しておいてください。この指定した id 属性の画像を入れ替えます。

アンカーにある onmouseover と onmouseout の関数 pic の1番目の引数には画像の id 名を入れます。これはスクリプト内の document.images[id] の id の部分に代入されます。

リンクに触れた時に表示する画像のファイル名を onmouseover の2番目の引数に指定してください。次にリンクから離れた時に表示する画像のファイル名(元の画像)を onmouseout の2番目の引数に指定してください。元の画像と onmouseout で表示される画像は同一のファイルにしてください。

この例では、リンク先に触れると on.gif (on.gif) が表示され、離れると off.gif (off.gif) が表示されます。

[PR] Yahoo!ショッピング