締切済み

javascriptを使い、サムネイル表示

2012/01/19 17:47

サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を教えてください。下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table>  <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>

wrurun
お礼率100% (1/1)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

みんなの回答

utun01
ベストアンサー率40% (110/270)

2012/01/19 18:33 回答No.1

まずソースをちゃんと読めるようになりましょう。ご提示の内容は、本当にサンプルとして簡潔に書かれていますので、これくらいは読めなければカスタマイズできません。 > img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。 img要素はHTML部分で列挙されています。「<img name="thumbnail" src="img1.png" width="48" height="48">」の部分です。 onclickへのバインドはコメントでも記載されていますが、「for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;」の部分です。各サムネイル要素のonclickにshowImgメソッドを関連付けています。もし自分で作るのが難しいようであれば、スライドショー系のソースはたくさん紹介されているので、以下のようなページで探してみるのがいいかもしれませんね。 http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery

質問者