離れた場所にある画像を変えるjavascript

特定の画像にマウスオンすることで離れた場所にある画像を変えるjavascriptを使ってHTMLを組んでいます。

※最初に表示されているのは画像Aです。
※小さい画像それぞれにマウスオンすると大きい画像がマウスオンした画像に切り替わります。
※その後マウスオフしたら他の画像にマウスオンしない限り、最後にさわった画像が大きい画面に表示されたままになります。

インターネットで調べていろいろ参考にして、javascriptを下記のようにし、

<script type="text/javascript">

function myChgPic(myPicURL){
document.images["myBigImage"].src = myPicURL;
}
</script>

図のように現される画像の固まりを下記のように記述しています。

<div class="bigphotobox"> <img src="images/15aw_dmg_look01a.jpg" alt=" " width="445" height="590" border="0" name="myBigImage"> </div> <div class="smallphotobox">  <div class="smallphoto1"><a href="javascript:void(0)" onMouseOver="myChgPic('images/15aw_dmg_look01a.jpg')"><img src="images/15aw_dmg_look01a.jpg" alt=" " width="175" height="232" border="0"></a></div>  <div class="smallphoto2"><a href="javascript:void(0)" onMouseOver="myChgPic('images/15aw_dmg_look01b.jpg')"><img src="images/15aw_dmg_look01b.jpg" alt=" " width="175" height="232" border="0"></a></div>  <div class="smallphoto1"><a href="javascript:void(0)" onMouseOver="myChgPic('images/15aw_dmg_look01c.jpg')"><img src="images/15aw_dmg_look01c.jpg" alt=" " width="175" height="232" border="0"></a></div>  <div class="smallphoto2"><a href="javascript:void(0)" onMouseOver="myChgPic('images/15aw_dmg_look01d.jpg')"><img src="images/15aw_dmg_look01d.jpg" alt=" " width="175" height="232" border="0"></a></div>  <div class="specbox"><span class="goshic"> </span></div> </div> ---------------------------------------------------------------------------------------------------

これできれいに動作するのですが、この画像の固まりを同じHTML上に複数個並べたいのです。

このような感じです。画像の固まりを12個並べたいと思っています。

今のscriptだと、一つの画面に対してしか動作せず、二番目の固まりの小さな画像にマウスオンすると、
一番目の大きな画像が変化してしまいます。
それぞれの画像の固まりの中で変化が起きるようにしたいのですが、プログラミングがあまりわからないのでどのように変えたらいいか分かりません。

どなたか、お知恵をお借りできませんでしょうか？

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLでなるべくやっつけようとするのは初めて見ました…

html
1<div class="bigphotobox">
2<img src="images/15aw_dmg_look01a.jpg" alt=" " width="445" height="590" border="0" name="myBigImage">
3</div>

大きく表示する用のこのコードは，画像にmyBigImageという名前を付けています．そしてマウスオーバーで，myBigImageという名前を持つ画像を差し替えています．
２つ目以降の大きな画像には，別の名前を付けるべきでしょう．

以下のようにしてみてはいかがでしょうか．

html
1<!-- ２つ目の表示用 -->
2<div class="bigphotobox">
3<img src="images/15aw_dmg_look01a.jpg" alt=" " width="445" height="590" border="0" name="myBigImage2">
4</div>
5
6<div class="smallphotobox">
7<!--画像a-->
8<div class="smallphoto1"><a href="javascript:void(0)" onMouseOver="myChgPic2('images/15aw_dmg_look01a.jpg')"><img src="images/15aw_dmg_look01a.jpg" alt=" " width="175" height="232" border="0"></a></div>
9<!-- 以下同様 -->

javascript
1<script type="text/javascript">
2function myChgPic(myPicURL){
3    document.images["myBigImage"].src = myPicURL;
4}
5function myChgPic2(myPicURL){
6    document.images["myBigImage2"].src = myPicURL;
7}
8<!-- 以下同様 -->
9</script>

画像の名前をmyBigImage2にして，またマウスオーバーで実行する関数も別のものを用意しました．
プログラミングに慣れていないのであれば，この方法の方が良いかと思いました．

投稿2015/08/01 16:58

KenTerada

総合スコア751

退会済みユーザー

2015/08/02 00:01

ありがとうございます！きちんと希望の動作になりました！ "myBigImage2"にするところまでは思いついたのですが、myChgPicと対になっていたところまでは気がつきませんでした。 HTMLでやっつけ…。きっと、もっとスマートなやり方があるのでしょうね…。図々しいですが、もし、お時間があれば、参考までにいいやり方を教えて頂けないでしょうか…。 15年くらい前は、はげしくHTMLを使っていたのですが、ブランクの後またWEB制作をやってみると、あたりまえだけどいろんなものが進化していて、javascriptもできないと面白いWEBも作れないので独学でいろいろやってみてます。お恥ずかしいです…。でも、本当に助かりました！ありがとうございました！

行動規範の内容に同意します