ベストアンサー

マウスオーバーのプルダウンメニューについて

2006/02/24 14:04

すみません。まったくのしろうとです。教えてください。会社のWebサイトをリニューアルしようとしていますが、メニューを折りたたみにしたいと考えています。ネットでmouseoverというJavaスクリプトでできるということまでは突き止めました。そしてサンプルも見つけたのですが、やりたいことと合致しなくて困っています。 <script language="JavaScript"></script> </head> <body> <IMG src="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <div id="Menu1" style="visibility:hidden" onMouseout="pdMenu('Menu1')"> <a href="http://www.openspc2.org/" >わっ！</a><br> <a href="http://www.impress.co.jp/">ぎゃっ！</a><br> <a href="http://game.gr.jp/" >しょえ～！</a><br> </div> </body> このスクリプトでは、newimg/AdAge.gifという画像の上にマウスをかざすと、言葉がプルダウンで出てきます。わたしがやりたいのは、この画像を単なるテキストに変えることです。HTMLエディタ上でイロイロやってみましたが、うまくいきません。この部分をテキストに変える方法を教えていただけないでしょうか？どうかよろしくお願いします。

kaduyo
お礼率42% (3/7)

JavaScript
回答数7
ありがとう数7

みんなの回答 （7）
専門家の回答

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

ベストアンサー

papillon68
ベストアンサー率61% (42/68)

2006/02/25 12:09 回答No.7

サンプルです。 ------------------------------------------------------ <html> <head> <script type="text/javascript" language="JavaScript">  　　// NN6,IE5 　　} else if(document.getElementById) { 　　　if(! document.getElementById(mName)) return false; 　　　var Menu = document.getElementById(mName); 　　// IE4 　　} else if(document.all) { 　　　if(! document.all[mName]) return false; 　　　var Menu = document.all[mName]; 　　} 　　Menu.style.display = (Menu.style.display == 'none'?'block':'none'); 　　return true; 　} // --></script> </head> <body> <div style="cursor:pointer;" onMouseover="pdMenu('Menu1')" onMouseout="pdMenu('Menu1')">大メニュー１　<div id="Menu1" style="display:none;"> 　　  <a href="" >中メニュー１</a><br> 　　  <a href="">中メニュー２</a><br> 　　  <a href="" >中メニュー３</a><br> 　</div> </div> <div style="cursor:pointer;" onMouseover="pdMenu('Menu2')" onMouseout="pdMenu('Menu2')">大メニュー２　<div id="Menu2" style="display:none;"> 　　  <a href="" >中メニュー１</a><br> 　　  <a href="">中メニュー２</a><br> 　　  <a href="" >中メニュー３</a><br> 　</div> </div> <div style="cursor:pointer;" onMouseover="pdMenu('Menu3')" onMouseout="pdMenu('Menu3')">大メニュー３　<div id="Menu3" style="display:none;"> 　　  <a href="" >中メニュー１</a><br> 　　  <a href="">中メニュー２</a><br> 　　  <a href="" >中メニュー３</a><br> 　</div> </div> </body> </html> ------------------------------------------------------ ※見やすくするために全角スペースでインデントしているので　このままでは動きません。　全角スペースを半角スペース2個に変換して下さい。 NN4以前の処理については合っているか分かりません＾＾；間違っているようでしたら直してください。また、マウスオーバー/アウトでは、次のようなことが起こります。 ------------- 大１　中１　中２大２　中１　中２　中３大３　中１ ------------- などのように上の大メニューより下の大メニューの中メニューが少ないとき、大２から大３にマウスを動かすと大３の中メニューが表示されず、閉じている状態になります。これはメニューの数の縦幅による違いです。使い勝手が悪いようでしたらマウスオーバー/アウトでの表示/非表示ではなく、マウスクリック時の切り替えにしたほうがよいかもしれません。 > <div style="cursor:pointer;" onMouseover="pdMenu('Menu')" onMouseout="pdMenu('Menu')">大メニュー <div style="cursor:pointer;" onClick="pdMenu('Menu')">大メニューマウスオーバー/アウトで表示/非表示を切り替えるものは一般的に大メニュー１｜大メニュー２｜大メニュー３｜・・・といった横メニューが多い気がします＾＾；大メニュー１大メニュー２　・　・というものは私が紹介したサイトのようにクリック時の方がいいかもしれませんね。ただ、これは好みの問題ですので、kaduyoさんが思ったようにすればいいと思います(@＾－＾@)

質問者

お礼 2006/02/27 08:09

papillon68様会社からの投稿であるため、土日で間があいてしまい、お返事が遅れました。すみません。ご多忙にもかかわらず、スクリプトと解説をお書きいただいたのですね。本当に頭が下がります。ありがとうございました。早速試してみます。

その他の回答 (6)

Blaise
ベストアンサー率33% (13/39)

2006/02/24 18:52 回答No.6

親メニューを開くと子メニューが出て、子メニューがさらに孫メニューを展開するように、とのことですが、そうなると、ご提示のスクリプトに書き加えるのはたいへんな作業になります。なので、ネットから適当な配布用スクリプトを探してみました。中でも、 http://himajin.moo.jp/java/menu2.html などが、解説もありカスタマイズもしやすいと思いました。試してみてください。HTML部分がリンクなど変更しやすいです。元スクリプトでは、親メニューと子メニュー群との間に空白があって気になるかもしれません（私はイマイチだと思いましたｗ）が、これを狭めるように修正するには、最初の<dir>のタグ内に style="margin:5 0 0 30px;" を入れてみてください。パラメータはお好みで。がんばってｗ

質問者

お礼 2006/02/27 08:06

Blaise様会社から投稿させていただいたため、土日で間があいてしまい、お返事が遅れました。すみません。ご多忙にもかかわらず、お探しいただいたのですね。本当に頭が下がります。ありがとうございました。早速試してみます。 kaduyo

papillon68
ベストアンサー率61% (42/68)

2006/02/24 16:30 回答No.5

> 折りたたみメニューの下には同じような折りたたみ > メニューを入れるつもりなのですが、ポインタがか > ざされるまでは大メニューのすぐ下に表示されるよ > うにしたいと考えています。 > > イメージ（ポインタをかざす前） > > 大メニュー > 大メニュー > 大メニュー > > イメージ（ポインタをかざした後） > > 大メニュー > 中メニュー > 中メニュー > 大メニュー > 大メニュー > > こんな風にするにはどうしたらよいでしょうか？マウスオーバー/アウト時ではないですが以下のサイトのようなイメージでしょうか。 http://www.techscore.com/tech/sql/

質問者

補足 2006/02/24 17:24

まさに構造はこんな感じです。そしてカーソルをかざしたときだけ、下の階層の情報が見えるようなしくみです。

papillon68
ベストアンサー率61% (42/68)

2006/02/24 15:54 回答No.4

訂正です。コピペして変更したので消し忘れがあったようです＾＾； > Menu = document.getElementById(mName).style;= "書きかえ後テキスト"; Menu = document.getElementById(mName).style; Operaへの対応は難しそうですね。マウスオーバーで表示されるメニューと別にリンクを表示しているものの二つを用意した方が親切かもしれません。 ------------------------------------------------ 　　　大メニュー１｜大メニュー２｜・・・ ------------------------------------------------ 大メニュー１　｜ +小メニュー１｜ +小メニュー２｜大メニュー２　｜ +小メニュー１｜ +小メニュー２｜ ------------------------------------------------ のようなイメージです。

質問者

補足 2006/02/24 16:49

papillon68様お返事ありがとうございます。イメージとしては、左フレームに折りたたみメニューを置くレイアウトなのです。本当は小メニューまで表示させるのが親切なのですが、メニュー項目があまりに多いので小メニューにして逃げよう、というのが正直なところです。ですので、大メニュー1のところにマウスをかざすとその下の小メニューが出るのですが、普段は大メニューのみが縦に並んでいるイメージです。説明が拙くてすみません。お手すきのときに教えていただければ、幸いです。

Blaise
ベストアンサー率33% (13/39)

2006/02/24 15:46 回答No.3

初心者の方には、このコードは少し気を衒っていて分かりづらいでしょう。素直にイベントを分けて、 <script language="JavaScript"> function V(){ document.getElementById('Menu1').style.visibility='visible'; } function H(){ document.getElementById('Menu1').style.visibility='hidden'; } </script> <div onmouseover="V()" onmouseout="H()">Touch Me!</div> <div id="Menu1" style="visibility:hidden"> <a href="http://www.openspc2.org/" >わっ！</a><br> <a href="http://www.impress.co.jp/">ぎゃっ！</a><br> <a href="http://game.gr.jp/" >しょえ～！</a><br> </div> という風にしたほうがよいと思います。クロスブラウザの対応ですが、No.2のかたが不明としているコードは if (navigator.appName == "Netscape") { if (parseInt(navigator.appVersion) < 5) { if (document.layers[id].visibility == "hide") { document.layers[id].visibility = "show"; } else { document.layers[id].visibility = "hide"; } } } のようになるかと思います。show/hideという点も注意が必要です。

質問者

補足 2006/02/24 16:43

Blaise様早速いただいたスクリプトで試してみました。できました！テキストの部分にプルダウンに対応する言葉を入れていただいたのも、うれしかったです。ところですみません。補足質問があります。折りたたみメニューの下には同じような折りたたみメニューを入れるつもりなのですが、ポインタがかざされるまでは大メニューのすぐ下に表示されるようにしたいと考えています。イメージ（ポインタをかざす前）大メニュー大メニュー大メニューイメージ（ポインタをかざした後）大メニュー　中メニュー　中メニュー大メニュー大メニューこんな風にするにはどうしたらよいでしょうか？

papillon68
ベストアンサー率61% (42/68)

2006/02/24 15:09 回答No.2

IEの古いバージョン(IE4)やネットエスケープの古いバージョン(NN4) でも正しく動作させようと思うと書き方を換える必要があります。 ----------------------------------------------- // NN6,IE5 if(document.getElementById) { Menu = document.getElementById(mName).style;= "書きかえ後テキスト"; // IE4 } else if(document.all) { Menu = document.all[mName].style; // NN4 } else if(document.layers) { // 書き方が分かりません＾＾； } ----------------------------------------------- また、OperaやFireFoxなど様々なブラウザがあります。全てに対応させる(全てで同様の動作をさせる)ためにはもう少し手を加える必要があるかもしれません。 IE(インターネットエクスプローラ)を利用されているユーザが9割とよく言われますが、他のものを使われているユーザもいます。もし、対応していないと大メニューにマウス乗せても小メニューが出ないということになります＾＾；

質問者

お礼 2006/02/24 15:33

papillon68様 > IE4やネットスケープへの対応確かにそうですね。いろいろなブラウザに対応させる必要があると思うのですが、なにせここまでつきとめるのがやっとでそこまでわかりませんでした。ご多忙にもかかわらず私の質問にお答えいただき、本当にありがとうございました。勉強になりました。

質問者

補足 2006/02/24 15:51

papillon68様早速やってみました。すごいです！本当にテキストにポインタをかざすとできますね。ところですみません。補足質問があります。折りたたみメニューの下には同じような折りたたみメニューを入れるつもりなのですが、ポインタがかざされるまでは大メニューのすぐ下に表示されるようにしたいと考えています。イメージ（ポインタをかざす前）大メニュー大メニュー大メニューイメージ（ポインタをかざした後）大メニュー　中メニュー　中メニュー大メニュー大メニューこんな風にするにはどうしたらよいでしょうか？

papillon68
ベストアンサー率61% (42/68)

2006/02/24 14:55 回答No.1

kaduyoさんこんにちは、papillon68と申します。 > <IMG src="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <span onmouseover="pdMenu('Menu1')" style="cursor:pointer;">大メニュー</span><br> imgタグは画像を扱うためのタグです。なのでこの部分を変更すればテキストとすることができます。今回はspanタグとしましたが、他のタグでもかまいません。 > Menu = document.all[mName].style; Menu = document.getElementById(mName).style; allというのは古い書き方で現在ではgetElementByIdというのを使います。

関連するQ&A

プルダウンメニューについて
ジャバスクリプトが全くの初心者です。プルダウンメニューをつくりたくて http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっていますが、 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> とありますが、ボタンが二箇所ある場合はジャバスクリプトの部分はどのように書けば良いでしょうか？ <SCRIPT language="JavaScript">  （ＩＤの部分を変更しています。）こう書いてみましたがダメでした。とても困っています、どなたか助けてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
プルダウンメニューについてです。
プルダウンメニューについてです。 http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっています。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。（”メニューを表示する”のページを作りたい。）どうしたらよいでしょうか?よろしくお願いします。
- ベストアンサー
- JavaScript
マウスオーバーの合体
マウスオーバーのプルダウンメニューとマウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、更に画像Ｂの下にプルダウンメニューが表示されるイメージです。尚、現在は以下の組み合わせがうまくいかない為（不可能？）個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"></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'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑
- 締切済み
- JavaScript
プルダウンメニューの表示
+のgifをクリックすると-のgifと詳しい表示が出る様にHTMLを書いたのですが、表示された後で閉じると、その+のgifが再表示されません。何が足りなくてそうなってしまうのでしょうか？また、親メニューの+が-になっている時、gifの-を表示させる方法を教えてやって下さい…。よろしくお願いします。 <body bgcolor="#000000" text="#ffffff" link="#000000" alink="#808080" vlink="#ff0000"> <div id='div1' style="position:absolute; left:10; top:100; width:250;"> <a id="menu1" href="#" onClick="onmenu(this,'menu11');return false" style="text-decoration:none;"> <img src="p.gif" alt="+" border="0"></a><font size="+2">BBS</font> <div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;"> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> aBBS<br> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"> </a> bBBS<br> └<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> cBBS </div></div></div> </body>
- ベストアンサー
- HTML
プルダウンとチェックボックスの連動
はじめましてよろしくおねがいします。やりたいことはプルダウンのメニューの中身を活性したり非活性にしたいのですが、どのようにやるのか想像がつきません。以下にソースを貼り付けました。チェックボックスにチェックされた場合はメニューの中身の■Yahoo!をリンクさせない様にしたいです。チェックが外れたときはメニューの中身はすべてリンクで表示します。現状はすべてリンクしかできていないです。チェックボックスとの連動の方法、メニューの中の非活性の方法を教えてください。よろしくおねがいします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR><BR><BR> <FORM> <INPUT TYPE ="checkbox">ここにチェックを入れるとプルダウンの■Yahoo!のみ非活性にしたい。 </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
プルダウンメニューがうまくいかない
スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■HTML■ <a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> <span>|</span> <a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> <span>|</span> <div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)"> <a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a> <div class="submenu" id="submenu1"> <a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント１</a> <span>|</span> <a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント２</a> <span>|</span> <a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント３</a> </div> </div> <span>|</span> <a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> <span>|</span> <div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)"> <a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ１</a> <div class="submenu" id="submenu2"> <a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ１</a> <span>|</span> <a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ２</a> <span>|</span> <a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a> </div> </div> 省略 </div> ■スタイルシート■ .menu { font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; height:2em; width:140px; border-top:solid 1px #33cc99; position:absolute; text-align:left; left:0; top:95px; padding-left:10px } .menu a { color:#33cc99; border-bottom:solid 1px #33cc99; text-decoration:none; display:block; width:100%; line-height:2em; text-align:left; } .menu a:hover { background-color:#ffffcc; } .menu span { color:#000000; display:none; } .menu img { margin-right:10px; margin-left:5px; border:0 } .submenu a{ background-color:#33cc99; border-bottom:solid 1px #ffffff; color:#ffffff; width:100%; } .submenu { visibility:hidden; position:absolute; left:0; width:140px; padding-left:10px; } .submenu a:hover { background-color:#0099cc; width:140px; } #submenu1 { position:absolute; left:0; } #submenu2 { position:absolute; left:0 } #submenu3 { position:absolute; left:0 } #submenu4 { position:absolute; left:0 } #submenu5 { position:absolute; left:0 } #submenu6 { position:absolute; left:0 } ■Javascript■ function MenuOn(x){ obj=document.getElementById("submenu"+x).style.visibility="visible"; } function MenuOff(x){ obj=document.getElementById("submenu"+x).style.visibility="hidden"; }
- 締切済み
- JavaScript
プルダウンメニュ展開時にずらす方法
以下の設定をおこなった際に「プルダウン1」で表示される「■メニュ1」と「■メニュ2」が「プルダウン2」に重ならないように「プルダウン2」が自動的に下がり、「プルダウン1」を閉じると元の位置に戻るような設定はないでしょうか？宜しくお願いいたします。 function pullDown1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } function pullDown2() { if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown1()">プルダウン1</A><BR> <DIV id="ID1" style="position:absolute;visibility:hidden;"> <A href="xxxx">■メニュ1</A><BR> <A href="xxxx">■メニュ2</A><BR>  <A href="javaScript:pullDown2()">プルダウン2</A><BR> <DIV id="ID2" style="position:absolute;visibility:hidden;"> <A href="xxxx">■メニュ3</A><BR> <A href="xxxx">■メニュ4</A><BR>
- ベストアンサー
- JavaScript
マウスをクリックで画像・・・
マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、以下の通りにUPすると「エラー」が出てしまいます。どこが悪いのか解らないのでよろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>
- 締切済み
- JavaScript
onMouseOver，Outを使用したドロップダウン型メニューを作りたい
★ヘッダ内 function mymenu(titles){ if((document.getElementById) && (!document.all)) { titles=document.getElementById(titles).style; if (titles.visibility=='hidden') titles.visibility="visible"; else titles.visibility='hidden'; } else{ titles=document.all[titles].style; if (titles.visibility=='hidden') titles.visibility="visible"; else titles.visibility='hidden'; } } ★本文 <base target="_blank"> （…中略…） <td class="top_menu" align="center" nowrap bgcolor="#000099" width="60" height="23"> <a style="text-decoration:none" href="JavaScript:mymenu('drop1')" target="_self">仮名</a><br> <div id="drop1" style="position: absolute; width: 120px; height: 60px; background-color: #000099; visibility:hidden"> <a href="#" target="_blank">あ</a><br> <a href="#" target="_blank">い</a><br> <a href="#" target="_blank">う</a><br> </div> </td> 上が現在のソースで、テーブルでレイアウトしています。これをonMouseOver，Outを使用したドロップダウン型メニューにできないでしょうか？宜しくお願いいたします。 <イメージ>http://www.adobe.co.jp/　…フラッシュは不要です。
- ベストアンサー
- JavaScript
ネスケ6以上でも動作させたいのですが・・・・・
ネスケ６からlayerがサポートされていないということなのですが、以下をどう書き直せば、ネスケ6以上でも動作するようになるのでしょうか？単純にgetElementByIdに置き換えても動かないですよね・・・・力不足(T_T) どなたかお助けお願いいたします。 <STYLE TYPE="text/css">  </STYLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <P><IMG src="image.gif" border="0" width="285" height="39"></P> <DIV ID="menu1"> <A HREF="function voi(){};voi()" onClick="pullDownMenu('tag1');return false">わんにゃん</A> </DIV> <DIV ID="tag1"> <A href="dog.html"> わんこ </A><BR> <A HREF="cat.htm"> にゃんこ </A><BR> <A HREF="kitten.htm"> こにゃんこ </A><BR> </DIV> </BODY>
- ベストアンサー
- JavaScript

マウスオーバーのプルダウンメニューについて