サムネイルクリックで、画像をチェンジさせたい

Question

初心者です。よろしくお願いします。

いくつか並んだ小さなサムネイル画像をクリックすることで、少し離れた大きめ画像をそれぞれのサムネイル画像の拡大に変えたいです。

下記のページの答えを参考にしてやってみました。http://oshiete1.goo.ne.jp/qa1192554.html

その時は上手にできました。

ただ、それが同一ページの中に画像違いで、下にあと２つ必要なのです。
原理は同じかと思い、上手にできたものをコピーペーストしてあとの２つを作りました。
しかし、あとで作った２つの画像群の中、サムネイルをクリックすると画像が切り替わって欲しい所ではなく、別のセクションのほうの画像が切り替わってしまいます。
どうすれば思った場所の画像を切り替えられますでしょうか？
もしくは、同一ページ内で３枚という複数にターゲット画像を分けることはムリなんでしょうか？

文章が解りづらくて申し訳ございません。

Kaone · Accepted Answer

まず、そのURLのサンプルは、変更する指定場所がCHANGEの一箇所である為、 function change(fname) という関数から、場所も指定できるように function change(imgname, fname) というimgnameが設定できるように変更します。それで、IMAGE1～IMAGE3の場所の画像を変更できるようになります。場所が指定でき照るので、何箇所にも対応できます。また、マウスが離れた時に戻る画像も参考URLでは、同じ場所で同じ画像を指定してたので、これも場所と、元に戻る画像を指定できるようにします。ただそれだと上で作ったchangeと同じなのでrestore()はなくしちゃって、changeを使えばいいことがわかります。それで、

上記のサムネイル画像の上にマウスが乗ったら、 change('IMAGE1', 'big1.jpg')を実行しろマウスが離れたらchange('IMAGE1', 'A1.jpg')を実行しろとなり離れたイメージの画像が置き換わります。おっと、質問者様の指定ではマウスが乗ったら出はなくてクリックでしたね。その場合、onmouseoverではなく、onclick="change('IMAGE1', 'big1.jpg')" とすることで、実行できます。ついでなので、change関数の中身の説明をしますと document.images[imgname].src=fname; となっています。これは、ドキュメント（ホームページ全体ですね）のイメージの[imgname]変数の中に入ってる名前の画像をfname変数の中に入っているURLに変えなさい。という命令です。

サムネイルクリックで、画像をチェンジさせたい

<html>

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング