- ベストアンサー
マウスを置くと画像が切り替わる設定を２つ以上したい。
IRAMです。 リンクをメニューで作っています。 リンクはテキストと画像共に張っています。 画像に触れると、画像が切り替わるという動作を するソースを、 <a href="onsei.html" onMouseOver="if(document.images) IMAGE.src='Image/onsei_2sd.jpg'" onMouseOut="if(document.images) IMAGE.src='Image/onsei_s_mb.jpg'"> <IMG SRC="Image/onsei_s_mb.jpg" border="0" width=100 height=60 name="IMAGE"> </a> としました。 実際に表示させて見ると、 確かにマウスを置いたときに画像が切り替わった のですが、 この設定を２つ以上すると、 画像が切り替わらないのです。 マウスを置いたときに背景色が変わる設定は それぞれのリンクごとにできました。 しかし背景が画像であるとき、 ２つ以上の画像に設定すると動作しないのです。 つまり設定が一つの画像に対してのときだけ 動作します。 この場合はどのような対策を取れば よろしいのでしょうか。 どなたか回答をお待ちしています。 よろしくお願い致します。
- IRAM
- お礼率58% (17/29)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#2で私が書いたとおり、下記の2箇所(「~~~」の部分)もIMAGE2,IMAGE3...と変えてください。 これらがimgタグのname(「^^^」の部分)と結びつきます。 ここがIMAGEをさしているので補足で仰る現象が出ます。 onMouseOver="if(document.images) IMAGE.src='Image/hands5.jpg'" ~~~~~~~~ onMouseOut="if(document.images) IMAGE.src='Image/hands1_2sd.jpg'"> ~~~~~~~~ <IMG SRC="Image/hands1_2sd.jpg" border="0" width=100 height=60 name="IMAGE2"> ^^^^^^^
その他の回答 (4)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#4の方の回答の通り、名前を合わせないといけません。
お礼
はい、おっしゃるとおりに、直してみましたところ期待どおりの動作ができました。 お世話になりました。 ありがとうございました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>IMAGE2、IMAGE3のところは動作がおかしくなってしまっています。 実際のソースがどうなっているか補足してくれませんか？
補足
IMAGE2↓ <Td Align="left" Valign="middle" Width="100" Height="60" BgColor="#FFD700"> <a href="tuuyaku.html" target="main" onMouseOver="if(document.images) IMAGE.src='Image/hands5.jpg'" onMouseOut="if(document.images) IMAGE.src='Image/hands1_2sd.jpg'"> <IMG SRC="Image/hands1_2sd.jpg" border="0" width=100 height=60 name="IMAGE2"> </a> </Td> IMAGE3↓ <Td Align="left" Valign="middle" Width="100" Height="60" BgColor="#FFD700"> <a href="sonota.html" target="main" onMouseOver="if(document.images) IMAGE.src='Image/hikidasi2_sv.jpg'" onMouseOut="if(document.images) IMAGE.src='Image/hikidasi.jpg'"> <IMG SRC="Image/hikidasi2_sv.jpg" border="0" width=100 height=60 name="IMAGE3"> </a> </Td> です。 <HEAD>環境内には以下のタグを書いています。 <SCRIPT language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = ""; //--> </SCRIPT> よろしくお願いします。
- deadlock
- ベストアンサー率67% (59/87)
name="IMAGE"とされたタグが複数あるのが原因です。 あまりいいやり方ではありませんが、単純なやり方を書いておきます。 以下のように、Aタグの「IMAGE.src」とIMGタグの「name="IMAGE"」を、AタグとIMGタグのペアが登場する順にIMAGE1、IMAGE2、…というように番号を振ってみてください。 <a href="onsei.html" onMouseOver="if(document.images) IMAGE1.src='Image/onsei_2sd.jpg'" onMouseOut="if(document.images) IMAGE1.src='Image/onsei_s_mb.jpg'"> <IMG SRC="Image/onsei_s_mb.jpg" border="0" width=100 height=60 name="IMAGE1"> </a> <a href="onsei.html" onMouseOver="if(document.images) IMAGE2.src='Image/onsei_2sd.jpg'" onMouseOut="if(document.images) IMAGE2.src='Image/onsei_s_mb.jpg'"> <IMG SRC="Image/onsei_s_mb.jpg" border="0" width=100 height=60 name="IMAGE2"> </a>
補足
質問しておきながら返事が遅くなってすみませんでした。 <SCRIPT language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = ""; //--> </SCRIPT> を</head>の前に入れています。 IMAGE2、IMAGE3と違うふうに割り当ててみますと、動作がおかしくなってしまいました。 マウスを置いたら、画像が切り替わるようにしたかったのですが・・・。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
どんな風に書いてうまくいかなかったのか 補足で書いてくれますか？ 質問文のIMGは別に背景というわけではありません。
補足
わざわざ返事してくださったのに、こちらの回答が遅れましてまことに申し訳ありません。 上でdeadlockさんが回答してくださったとおり、IMAGEの名前をそれぞれ別々に割り当ててみました。 そうすると、 <SCRIPT language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = ""; //--> </SCRIPT> で指定しています。 IMAGEとわりあてた画像は動作したのですが、IMAGE2、IMAGE3のところは動作がおかしくなってしまっています。 IMAGE2をわりあてた画像にマウスをおくと、IMAGE2の画像ではなく、IMAGEの画像が、IMAGE2に変わってほしい画像に切り変わってしまいます。 IMAGE3をわりあてた画像にマウスをおいても同様で、IMAGEの画像だけが変わります。
お礼
おっしゃるとおりに、直してみましたところ期待どおりの動作ができました。 とても助かりました。 ありがとうございました。