画像の入れ替え

質問

簡単なショッピングサイトを作成しています。
色々な色を取り揃えている商品があるのですが、
ページの中央に1枚大きく画像を表示してその下に他の色（約20色）の画像を小さく表示しています。
下の小さい画像をクリックすると中央の大きい画像がクリックされた色にかわるようにしたいです。

色々なサイトを検索してもクリックしたその画像を入れ替える方法は書いてあってもまったく別の画像の入れ替えの方法が見つかりません。
試行錯誤で色々試しているのですが中央の画像が変わらず他の場所にある画像がかわったりとなかなか上手くいきません。
どなかた書き方ご存知の方教えてください。
よろしくお願いします。

回答No.1

leap_day · ベストアンサー

こんにちは

こんな感じのもの？
（src=""にsrc="sample.gif"のように対象の画像のパスを入れてください）

<style type="text/css">
img {
width:50px;
height:50px;
}
</style>
<script language="javascript">
<!--
function imgch(url) {
document.getElementById("image").src=url;
}
//-->
</script>

<img src="" id="image" style="width:200px;height:200px;margin-left:300px">
<div>
<img src="" onClick="imgch(this.src)">
<img src="" onClick="imgch(this.src)">
<img src="" onClick="imgch(this.src)">
<img src="" onClick="imgch(this.src)">
・
・
・
<img src="" onClick="imgch(this.src)">
</div>

お礼

ありがとうございました！できました！
自分で色々試していたものよりずっとシンプルで解りやすいご回答でした。助かりました。