onMouseOverがうまくいきません

このQ&Aのポイント
  • JavaScriptで、プルダウンメニュー及びマウスで触れたときのメニューの画像変更を行っていますがうまくいきません。
  • プルダウンはうまくいきますが、画像変更しないのです。
  • どうやらプルダウンメニューの表示・非表示に使っているonMouseOverとonMouseOutが、画像変更のそれらとダブっているためだと思うのですが…。Macでは動作するのですが、Winでは動作しないのです。
回答を見る
  • ベストアンサー

onMouseOverがうまくいきません

JavaScriptで、プルダウンメニュー及びマウスで触れたときのメニューの画像変更を行っていますがうまくいきません。プルダウンはうまくいきますが、画像変更しないのです。 どうやらプルダウンメニューの表示・非表示に使っているonMouseOverとonMouseOutが、画像変更のそれらとダブっているためだと思うのですが…。Macでは動作するのですが、Winでは動作しないのです。 <div id="xx" class="yy" onMouseOver="show('xx');" onMouseOut="hide('xx');"> <a href="xx.html" onMouseOver='xxxx' onMouseOut='yyyy'><img src="photo.gif" name="aa"></a> </div> うまく両方機能させるいい方法はないでしょうか?

noname#236902
noname#236902

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

当方WinXpPro+WinIE6ですが 以下のような記述でうまく動きました。 <script type="text/javascript"> <!-- function show(id){ document.getElementById(id).style.display="block"; } function hide(id){ document.getElementById(id).style.display="none"; } //--> </script> ~ <div onMouseOver="show('xx');" onMouseOut="hide('xx');"> MENU<br> <div id="xx" style="display:none"> <a href="xx.html" onMouseOver="document.getElementById('icon').src='00.jpg'" onMouseOut="document.getElementById('icon').src='gazou.gif'"><img id="icon" src="gazou.gif"></a> </div> </div>

noname#236902
質問者

お礼

回答ありがとうございます。 ただ今やっていますが、なかなかうまくいきません。 変更する画像がテーブルで組んで数個あるのですが、テーブルタグが邪魔しているのでしょうか?

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

>ただ今やっていますが、なかなかうまくいきません。 >変更する画像がテーブルで組んで数個あるのですが、テーブルタグが邪魔しているのでしょうか? Win+IE?で動かないという意味ですよね? どんなふうになっているか、補足でアップしていただけませんでしょうか?

noname#236902
質問者

お礼

やり直してみたところ、Mac、Winともうまく行くようになりました。DIVタグの使い方が違っていたようです。今回のことは大変参考になりました!ありがとうございました。

関連するQ&A

  • onmouseoverはCSS参照に含められるか?

    <div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか? a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。

    • ベストアンサー
    • CSS
  • onmouseover、onmouseoutとはどのような状況を指すのですか?

    例えば、 <div onmouseover="a()" onmouseout="aa()"> <br> <a onmouseover="b()" onmouseout="bb()">あああ</a><br> <br> <span onmouseover="c()" onmouseout="cc()">いいいい</span> <p>ううううう</p> </div> <a>,<span>,<p>の間に空白があります。このようなときに<a>から<span>にマウスカーソルが移動したとします。 この時にdivのa()は実行されるのでしょうか。 それともaa()も実行されるのでしょうか教えてください。

  • onMouseOverの適応範囲

    困ってしまい質問させていただきます。 <div>  <a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">  <a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。 一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか? ブラウザはIEを利用しています。 どうか宜しくお願いします。

  • onMouseOver、onMouseOutイベントにて

    質問させていただきます。 GoogleMapでリストに表示されている建物名の上に マウスカーソル乗せると、 その場所をマーカーで表示させ、 マウスをリストから外すとマーカーが消える、 という機能を作成しようとしています。 マーカーを表示したり消したりは出来るようになったのですが 動きが非常にぎこちないです。 調べてみると リンクでOnMouseイベントを発生させているタグの <a>~</a>の間に<div></div>などが間に入ると動きが ぎこちなくなることがわかりました。 普通に動く場合 <a harf="#" onMouseOver="・・・・" onMouseOut="・・・・"> 建物名<br>   住所 </a> ぎこちなく動く場合 <a harf="#" onMouseOver="・・・・" onMouseOut="・・・・"> <div class="***1">建物名</div> <div class="***2">住所</div> </a> どうも良い時はマウスカーソルが建物名と住所名を移動しても 反応しない。 ぎこちない場合、建物名から住所名にマウスカーソルが移動する 度に反応している。 CSSを使用しているため、なるべく<div>タグは外したくない。 何かいい方法が無いでしょうか? もし何かわかる方がいたら、ご教授お願いします。 何処に書いていいかわかりませんでしたが 多分ここが一番あってるかなと思ったので書かせていただきました。

  • onMouseOverによる表示変更について

    HTML、JavaScript とも初心者です。 onMouseOver で同心円を拡大して表示、および、移動して表示を行いたいのですが、 <img src="gazou1.png" onMouseOver="Kasaneru1()" onMouseOut="hanasu1()" id="kaeru" /> であると、同じ大きさの画像にしか変更できません。 拡大表示、移動表示の方法を教えていただきたく、よろしくお願いします。

  • HTMLコーディング(onMouseOver,onMouseOut)

    HTMLコーディングで質問します。 やりたいこと:下記コードのように、<div></div>の間について、onMouseOver,onMouseOutにより、枠線を表示、非表示にする。 理由:下記コードの場合、<div></div>がない場合、「1. Hxxxx」にリンクが張られているが、呼び出されるPDFファイルの内容は、(1) Cxxxx、(2) Sxxxxを含んでいることを明確にしたい。 テスト結果:FireFoxでは狙い通りになるが、IEでは動作しない。また、DreamWeaverではエラー(HTML4.0)となります。 <div onmouseover="this.style.border='1px solid black'; this.style.padding='0px 0px 0px 0px';" onmouseout="this.style.border='0px'; this.style.padding='1px 1px 1px 1px';"> <ul> <li><a href="pdf/3.pdf">1. Hxxxx</a> <ul> <li>(1) Cxxxx</li> <li>(2) Sxxxx</li> </ul> </li> </ul></div>

  • マウスオーバーの合体

    マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか? イメージとしては所期画面に画像Aがあり、マウスを載せると画像Aが画像Bになり、 更に画像Bの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為(不可能?) 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑

  • IE5でonmouseoverがうまく行きません。

    画像にマウスが触れた時にその画像を 替えたいのですが,NNではうまく行き, IE5では画像は変化せずうまく行きません。 IE5は次のエラーメッセージがでます。 ページでエラーが発生しました。 -> オブジェクトを指定してください。 よろしくお願いします。 <HTML><HEAD><title></title> <script language="javascript"> <!--- img = new Array(); for (i = 0; i <= 1; i++) {  imag[i] = new Image() ;  imag[i].src = "on_" + i + ".gif"; } function On(n) {   document.images['menu'+n].src = imag[n].src; } function Off(n) {   document.images['menu'+n].src = "off_" + n + ".gif"; } //---> </script></head> <BODY> <a href="xxx.html" TARGET="MAIN" onMouseOver="On(0)" onMouseOut="Off(0)"> <img src="off_0.gif" name="menu0" border="0"></a> <a href="yyy.html" TARGET="MAIN" onMouseOver="On(1)" onMouseOut="Off(1)"> <img src="off_1.gif" name="menu1" border="0"></a> </BODY></HTML>

  • onmouseoverに複数の命令を書き込みたい

    こんにちは、初心者の質問です。 画像Aにカーソルを乗せると、別のところにある画像Bが違う画像に変化するようにJAVASCRIPTを使ってスクリプトを書きました。これはうまく作動します。 さらにこの画像Aも(画像A自身にカーソルが乗った時に)別の画像に変化するようにしたいのですが、うまくいきません。 画像Aの記述は以下のようになっています。 <img src="pic1.gif" width="50" height="30" onMouseOut="changeImg(photos[6])" onMouseOver="changeImg(photos[0])"> onmouseoverに "this.src='マウスが触れた時に表示したい画像のアドレス'" を追加したいのですが、いかんせん画像Bを変化させるためのスクリプトがすでに書き込まれています。 そこで質問ですが、onmouseoverに複数の命令を書き込むことは可能でしょうか?またそれが不可能な場合上記のようなギミックを作る最善の方法や、解説のあるサイト等を教えていただけるとありがたいです。 詳しい方、よろしくお願いします

    • ベストアンサー
    • HTML
  • JS onmouseoverについて

    お世話になっております。 お忙しいところ申し訳ありません onmouseoverでテキストリンクから 画像を表示させているのですが onmouseで出た画像の場所に <select>で表示したセレクターがあり 画像が隠れてしまいます どちら様か画像を一番上に持ってくる 方法を教えていただけないでしょうか? 仕様 WIN XP IE SP2 NNで見ると表示されます。 文章が下手で申し訳ありません かいつまんだソースをのせます <!-- function msg() { document.all.aaa.innerHTML ='<table width=200 cellspacing=0 cellpadding=0 border=1><tr><td>bbb</td></tr></table>'; } //--> </script> <div id="aaa" STYLE="position:absolute;"></div> <a onmouseover="msg()" HREF="###">1111</a> <select name="ggg"> <option VALUE="" SELECTED>xxx</option> <option VALUE="">yyy</option> </select> です。 bbbを見えるようにしたいのです よろしくおねがいします

専門家に質問してみよう