- HOME >
- JavaScript >
- クリックして画像を切り替える
クリックして画像を切り替える
document.オブジェクト名.src = URL;
※「オブジェクト名」は、切り替える画像に「name」で指定した名前が入ります。
※「URL」には切り替え後の画像のURLを入れます。
画像を切り替えるJavaScriptを使うことで、例えば小さなサムネール画像をクリックすることで大きい画像を表示するように出来ます。これの応用でメニューボタンなどのロールオーバー（ボタンを光らせたりする）なども出来るようになります。（WEB上手の上にあるメニューのような効果）
<html>
<head>
<title>クリックして画像を切り替える</title>
</head>
<body>
<table border="0" width="470" cellpadding="0" cellspacing="0">
<tr>
<td width="120">
<a href="javascript:document.ph01.src = 'img/change_ph01.jpg'; void(0);">
<img src="img/change_ph01.jpg" width="100" height="70"
alt="写真1" border="0"></a><br>
<a href="javascript:document.ph01.src = 'img/change_ph02.jpg'; void(0);">
<img src="img/change_ph02.jpg" width="100" height="70"
alt="写真2" border="0" vspace="10"></a><br>
<a href="javascript:document.ph01.src = 'img/change_ph03.jpg'; void(0);">
<img src="img/change_ph03.jpg" width="100" height="70"
alt="写真3" border="0"></a><br></td>
<td width="350" align="right"><img src="img/change_ph01.jpg"
width="329" height="230" alt="拡大写真" name="ph01"></td>
</tr>
</table>
</body>
</html>
;) ;) ;) |  |
サンプルでは、左側にあるサムネール（3枚の小さな写真）をクリックすると、右側にそれぞれの大きな写真が表示されます。右側の拡大写真にはname="ph01"で「ph01」という名前を付けてあります。そして左側の小さい写真には、それぞれに「document.ph01.src = 'img/change_ph01.jpg';」という感じで、大きい写真に変わるようにURLを指定してあります。その後の「void(0);」はページが上にスクロールされるのを防ぐ「何もしない」命令です。
関連記事
こちらの記事も読まれています
