- ベストアンサー
【WEBデザイン】画像の並び方と切り替え方法
大きな画像の右隣に3つの小さな画像を縦に並べ、 小さな画像を選択すると大きな画像が切り替わるようにしたいです。 （添付画像のイメージです） cssとjavascript がまだまだ初心者なので手こずっています。 WEBデザインに詳しい方、ご教授願います。
- yu1ezweb
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは ＃画像1と大きい画像1は同一画像で大きさだけ違うサンプル作成しました。 ＃onclick="ch(1)"で引数を利用します。 ＃ function ch(n) { if (n == 1) { imgchang(n); } nが1の時は関数imgchang(n);を引数付で実行します。 ＃関数imgchang(n)は大きい画像をDOMで変更します。 サンプル <!DOCTYPE html> <html> <head> <title>画像切り替えサンプル</title> <style type="text/css"> div.table{ display:table; } div.row{ display:table-row; } div.cell{ display:table-cell; border:1px solid; } img.big{ width:450px; height:298px; } img.small{ width:150px; height:97px; cursor:pointer; } </style> <script type="text/javascript"> function ch(n) { if (n == 1) { imgchang(n); } if (n == 2) { imgchang(n); } if (n == 3) { imgchang(n); } } function imgchang(n) { document.getElementById("img").src = "img" + n + ".png"; } </script> </head> <body> <div> <div class="table" style="float:left;"> <div class="cell"> <img class="big" alt="" id="img" src="img1.png" /> </div> </div> <div class="table"> <div class="row"> <div class="cell"> <img class="small" alt="" id="img1" src="img1.png" onclick="ch(1)"/> </div> </div> <div class="row"> <div class="cell"> <img class="small" alt="" id="img2" src="img2.png" onclick="ch(2)"/> </div> </div> <div class="row"> <div class="cell"> <img class="small" alt="" id="img3" src="img3.png" onclick="ch(3)"/> </div> </div> </div> </div> </body> </html>
お礼
お返事遅くなりました。 希望どおりにできました。 ありがとうございます。