JavaScriptサンプル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);」はページが上にスクロールされるのを防ぐ「何もしない」命令です。
簡単！JavaScript作成ツール
「document.オブジェクト名」で変えられるものは「src（画像の参照URL）」だけではありません。「width（幅）」や「height（高さ）」等、リアルタイムで色々と変えることが出来ます。下のサンプルでは画像に関する属性の変更を随時見ることが出来ます。値を入力して、画面のどこかをクリックしてみてください。入力した値に応じて画像が変わると思います。
WEB上手TOP ｜ JavaScript ｜ PHP ｜ Flash ｜ Material ｜ このサイトについて ｜ サイトマップ ｜ お問い合わせ
Copyright (C) 2007-2008 WEB-JOZU. All Rights Reserved.
