- ベストアンサー
マウスオーバーのメニューについて
お世話になります。 現在、オンマウスでメニュー画像が表示される仕組みを作成しているのですが、別のメニューにする方法がわかりません。 たとえば、「MAIN」と「LINK」のメニューがあるとして、MAINはMAINのメニュー、LINKはLINKのメニューが表示されるという方法です。 http://memorva.jp/memo/html/js_css_menu_mover.php 上記のURLの方法なのですが。 この場合、cssの数値を変えて（css12ならcss13）スクリプトを追加すればいいのでしょうが、その方法でやっても、同じ画像が表示されます。 （css13のスクリプトを新しく書き加えたのにブラウザでプレビューするとcss12の内容が表示されてしまいます。） ↓HEAD内のCSS設定部分は下記のように分割して書いてます <script language="javascript"> <!-- function mOver(){ css12.style.display = "block"; } function mOut(){ css12.style.display = "none"; } //--> </script> <script language="javascript"> <!-- function mOver(){ css13.style.display = "block"; } function mOut(){ css13.style.display = "none"; } //--> </script> よろしくお願い致します。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- reverie013
- ベストアンサー率18% (26/143)
話は先に進んでいるようですがもしかしてとちょこっと思った突っ込みを。 何だか質問者様はid名をわかっていらっしゃらなさそうな印象を受けました。 もしかしてHTML側のブロック要素に指定したid名を変更されていなかった、 間違っていたということはありませんか？ 念のため確認でした。 以下は質問に関係ない独り言ですが、 参考サイトのcss12だとかっていうid名ってどうなのだろう。 ありなんですかね？ 個人的にこういう紛らわしいような名前ってNGだと思っていたのですが。。。 まあ個人の好き好きですよね。失礼致しました。
お礼
ID名はちゃんと変更しました。 間違っていたということもおそらくは無いです（自信ありません）。 ID名はURL先に記述されていたものをそのまま使い、バグ防止の為変更していませんでした。 ややこしくてすみません。
- fujillin
- ベストアンサー率61% (1594/2576)
ANo.2様の回答で、できるはずですが？ どこをどのように修正されたのか不明ですが、こんな感じでやれば何箇所でも可能なはずです。 <html> <style type="text/css"> div { width:150px; } .css0 { display:none; padding:3px; position:relative; left:8px; top:0px; border:2px gray solid; } </style> <script language="JavaScript"> function mOver(elm){ fuga(elm,'block'); } function mOut(elm){ fuga(elm,'none'); } function fuga(e,dsp){ document.getElementById(e).style.display = dsp; } </script> <body > <div onmouseover="mOver('hoge1')" onmouseout="mOut('hoge1')"> リンクテスト1 <div id="hoge1" class="css0"> <a href="http://www.yahoo.co.jp/">Yahoo</a><br> <a href="http://www.google.co.jp/">Google</a> </div></div> <p> <div onmouseover="mOver('hoge2')" onmouseout="mOut('hoge2')"> リンクテスト2 <div id="hoge2" class="css0"> <a href="http://www.infoseek.co.jp/">Infoseek</a><br> <a href="http://www.biglobe.ne.jp/">Biglobe</a> </div></div> </body> </html>
お礼
別々に表示は出来たのですが、今度はページのデザインが勢いよく崩れてしまいます。 表示されるメニューを任意の位置に指定ということに関しては、質問で記述したリンク先のソースでも出来ましたが、その下の表示されたページの内容がズレてしまいます。 （記述頂いたソースですとリンクテスト２の文字が下にズレます） 内容が下にズレないでそのまま重ねて表示も可能でしょうか。
- reverie013
- ベストアンサー率18% (26/143)
試していないのでそれで必ずできる保障はありませんが、 現在 onmouseover="mOver()" onmouseout="mOut()" とされているところを onmouseover="mOver('id名')" onmouseout="mOut('id名')" として、JSの記述を function mOver(mId){ document.getElementById("mId").style.display ="block"; } function mOut(mId){ document.getElementById("mId").style.display ="none"; } とかしたらできそうな気がします。 気がしているだけなので試してみて下さい。
お礼
ありがとうございます。 しかしながら、同じ結果になってしまいました。 お調べ頂いたのに申し訳ないです・・・。
- reverie013
- ベストアンサー率18% (26/143)
とりあえず見て気になった部分の指摘だけ。 JSは分割して書く意味はありません。 関数名が重複している為、別の関数名に変えるか、 一まとめに書いて関数内で条件分岐などするか しなければいけないと思います。 また何か気が付いたら書き込みます。
お礼
ありがとうございます。 条件分岐！それがありましたっけ。 名前を指定するだけではダメという事でしょうか。
お礼
素早いご回答ありがとうございます。 <div id="hoge1" class="css0">～内のソースをposition:absoluteにしたら出来ました。 何とかなりそうです。もう少し頑張ってみます。 ありがとうございました！