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

解決済

質問者：ursla
質問日時：2007/12/13 04:00
回答数：1件

初心者です。よろしくお願いします。

いくつか並んだ小さなサムネイル画像をクリックすることで、少し離れた大きめ画像をそれぞれのサムネイル画像の拡大に変えたいです。

下記のページの答えを参考にしてやってみました。http://oshiete1.goo.ne.jp/qa1192554.html

その時は上手にできました。

ただ、それが同一ページの中に画像違いで、下にあと２つ必要なのです。
原理は同じかと思い、上手にできたものをコピーペーストしてあとの２つを作りました。
しかし、あとで作った２つの画像群の中、サムネイルをクリックすると画像が切り替わって欲しい所ではなく、別のセクションのほうの画像が切り替わってしまいます。
どうすれば思った場所の画像を切り替えられますでしょうか？
もしくは、同一ページ内で３枚という複数にターゲット画像を分けることはムリなんでしょうか？

文章が解りづらくて申し訳ございません。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Kaone
回答日時：2007/12/13 04:26

<html>

<head>
<title></title>
<script type="text/javascript">

</script>
</head>
<body>
<img name="IMAGE1" src="A1.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<hr>
<img name="IMAGE2" src="A2.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<hr>
<img name="IMAGE3" src="A3.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<hr>
</body>
</html>

まず、そのURLのサンプルは、変更する指定場所がCHANGEの一箇所である為、
function change(fname)
という関数から、場所も指定できるように
function change(imgname, fname)
というimgnameが設定できるように変更します。

それで、IMAGE1～IMAGE3の場所の画像を変更できるようになります。
場所が指定でき照るので、何箇所にも対応できます。

また、マウスが離れた時に戻る画像も参考URLでは、同じ場所で同じ画像を指定してたので、これも場所と、元に戻る画像を指定できるようにします。
ただそれだと上で作ったchangeと同じなのでrestore()はなくしちゃって、changeを使えばいいことがわかります。

それで、
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
上記のサムネイル画像の上にマウスが乗ったら、
change('IMAGE1', 'big1.jpg')を実行しろ
マウスが離れたらchange('IMAGE1', 'A1.jpg')を実行しろとなり
離れたイメージの画像が置き換わります。

おっと、質問者様の指定ではマウスが乗ったら出はなくてクリックでしたね。
その場合、onmouseoverではなく、onclick="change('IMAGE1', 'big1.jpg')"
とすることで、実行できます。

ついでなので、change関数の中身の説明をしますと

document.images[imgname].src=fname;

となっています。
これは、ドキュメント（ホームページ全体ですね）のイメージの[imgname]変数の中に入ってる名前の画像をfname変数の中に入っているURLに変えなさい。という命令です。