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>
としました。
実際に表示させて見ると、
確かにマウスを置いたときに画像が切り替わった
のですが、
この設定を2つ以上すると、
画像が切り替わらないのです。
マウスを置いたときに背景色が変わる設定は
それぞれのリンクごとにできました。
しかし背景が画像であるとき、
2つ以上の画像に設定すると動作しないのです。
つまり設定が一つの画像に対してのときだけ
動作します。
この場合はどのような対策を取れば
よろしいのでしょうか。
どなたか回答をお待ちしています。
よろしくお願い致します。
No.4ベストアンサー
- 回答日時:
#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">
^^^^^^^
No.3
- 回答日時:
>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>
よろしくお願いします。
No.2
- 回答日時:
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と違うふうに割り当ててみますと、動作がおかしくなってしまいました。
マウスを置いたら、画像が切り替わるようにしたかったのですが・・・。
No.1
- 回答日時:
どんな風に書いてうまくいかなかったのか
補足で書いてくれますか?
質問文のIMGは別に背景というわけではありません。
この回答への補足
わざわざ返事してくださったのに、こちらの回答が遅れましてまことに申し訳ありません。
上でdeadlockさんが回答してくださったとおり、IMAGEの名前をそれぞれ別々に割り当ててみました。
そうすると、
<SCRIPT language="JavaScript">
<!--
loadImage = new Image();
loadImage.src = "";
//-->
</SCRIPT>
で指定しています。
IMAGEとわりあてた画像は動作したのですが、IMAGE2、IMAGE3のところは動作がおかしくなってしまっています。
IMAGE2をわりあてた画像にマウスをおくと、IMAGE2の画像ではなく、IMAGEの画像が、IMAGE2に変わってほしい画像に切り変わってしまいます。
IMAGE3をわりあてた画像にマウスをおいても同様で、IMAGEの画像だけが変わります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
jQuery bxSlider 画像に変更
-
クリッカブルマップの一部分だ...
-
画像をクリックして別の画像を...
-
javaを使ってマウスオンでの画...
-
ランダム表示に加えwidthをブラ...
-
画像にロールオーバーするとメ...
-
プルダウンの位置がwin/macでず...
-
Javascript で共通の処理をどこ...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
画像の重なりの順序を代える方...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
1枚の画像をクリックして複数の...
-
ステータスバーについて
-
JavaScript スライドの画像にリ...
-
マウス追従スクリプトについて
-
画面の表示位置を指定させて表...
-
Javascriptで指定した日付と時...
-
プルダウンの位置がwin/macでず...
-
jQueryで特定のURLの時のみ表示
-
オンマウスで、画像切り替え+...
-
バナー広告のように表示させた...
-
ランダム表示に加えwidthをブラ...
-
JavaScriptとチェックボックス...
-
ホォルダの読む込み
-
jQuery bxSlider 画像に変更
-
画像にロールオーバーするとメ...
おすすめ情報
