ドロップダウンメニューのプログラム改善 -ドロップダウンメニューを作成する-

ドロップダウンメニューを短縮したい

今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>

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を利用しています。どうか宜しくお願いします。

マウスオンで説明文をページの真ん中に表示させたい！

よろしくお願いします。 http://www4.ocn.ne.jp/~tomotan/tagpractice.html （↑）このサイトで <HTML> <HEAD> <SCRIPT></SCRIPT> <STYLE></STYLE> </HEAD> <BODY> <A HREF="#" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">ここにマウス</A> <DIV ID="myLayer1" CLASS="myStyle"> Hello!! </DIV> </BODY> </HTML> を表示させると、「Hello!」の文字が「テキスト」の右側に表示されます。そうじゃなくて、「Hello!」の右側にリンクを箇条書きに書き込んでいきたいんです。で、リンクにマウスを乗せると左側にリンク先の説明が表示される・・・というふうにしたいんです。お願いしますｍ（＿＿）ｍ

ブログでonClickを2つ以上並べると動かない

ブログ上のhtmlタグについて質問です。"onClick"のタグを1つ張ると動くのですが、2つ以上並べると動かなくなります。ブログはseesaaブログを使っています。 ↓動く <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> ↓動かない <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> よろしくお願いします。

ロールオーバーで画像拡大、z-index

下記の様にjavascriptとcssで、サムネイル画像をロールオーバーしたら拡大画像が表示されるように設定しました。しかしz-indexが効かずに拡大画像がほかのサムネイル画像の下に表示されてしまいます。 z-indexの対処方法などいろいろ調べ試してみたのですが、うまくいきませんでした。どのようにすればうまく表示できるか教えていただけないでしょうか。よろしくお願いします。 <html> <head> <title>テスト</title> <script type="text/javascript">  </script> </head> <body> <p style="margin-top:50px;"> <div style="position:relative; float:left;"> <div id="thum1" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')" style="border:0px; z-index:2;"> <img src="thum1.png" width="100" height="100"> </div> <div id="thum2" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')"> <img src="thum2.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト1</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum3" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')" style="border:0px; z-index:2;"> <img src="thum3.png" width="100" height="100"> </div> <div id="thum4" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')"> <img src="thum4.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト2</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum5" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')" style="border:0px; z-index:6;"> <img src="thum5.png" width="100" height="100"> </div> <div id="thum6" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')"> <img src="thum6.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト3</center></b> </div> </div> </div> </p> </body> </html>

JavaScripｔについての質問です。

javascript初心者です。方法が分かりませんので、教えていただける方、お願いいたします。ホームページを作っております。とあるページの下の部分をクリックすると、新しいウィンドウが開きます。 <a href="#" onClick="window.open('f/f.html?1','newWin','width=850,height=650')">テキスト</a> 新しいページは次のようになっています。 ↓ここからJavaScript↓ flag = false; function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; } ここからhtml↓ <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div> 以上です。上記に関して説明を付け加えますと、新しいウィンドウ（新しいページ）上では、function fx　とpd1が作動し、div　ID1がプルダウンメニューのように開くようになっています。それに付け加えたいのですが、冒頭であげた部分をクリックするとID1がプルダウンのように開くだけでなく、div s1の　name="s1img"であげた部分を別の画像が表示されるようにするにはどのようなjavascriptを追加すればいいでしょうか？　　どなたか教えていただければ有り難いです・・・・・。

javascript について追加の質問

質問NO6591909＝3/14　10：59の追加の質問です。素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？　IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>

６/１０にお尋ねしましたマウスを重ねると横に画像がですスクリプトについて再度

わかりやすく教えていただいたのですが、画像のＵＲＬを入力する個所がわからなくなってごちゃごちゃになってしまったのです。もうしわけありません、今一度ＵＲＬをどこに入れたらよいのか教えていただければ幸いです。お手数おかけいたします。 '********** ココから ********** <script language="javascript">  </script> <A HREF="#" onMouseMove="changeVis('image', true)" onMouseOut="changeVis('image', false)">アイコン（hogehoge）</A> <IMG SRC="hogehoge.gif" STYLE='visibility:hidden' id='image'></DIV> '********** ココまで **********

リンクについて質問です。

div要素で左側がメニュー・右側がコンテンツという配置にしました。右側のコンテンツは、背後に3つの文章をvisibility="hidden"で隠しています。　メニュー側からだと上手くリンク先に飛ぶのですが、コンテンツ側からだと全く反応しません。ちなみにリンク先の文章を表示する場所は、右側の部分です。メニュー側の方で一度全てリンクをクリックしてからだとなぜかコンテンツ側でもリンク先に飛ぶことが出来ます。何故でしょうか？？ function change(con) { document.all("main").style.visibility="hidden"; document.all("lesson").style.visibility="hidden"; document.all("lesson2").style.visibility="hidden"; document.all("lesson3").style.visibility="hidden"; document.all(con).style.visibility="visible"; }

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/　…フラッシュは不要です。

Flashで作成したボタンをJavascriptに使用したい

JavaScriptで下記のような記述をしました。 function btnCli(con) { document.all("main").style.visibility="hidden"; document.all("company").style.visibility="hidden"; document.all(con).style.visibility="visible"; } Flashで作成したボタンには <a href = "javascript:btnCli('company')";> <Flashのボタン>←ここに記述してる </a> としているのですが、関数の引数にcompanyが渡らないらしく画面が表示されません。表示させたい画面には <div id = "company" style ="visibility:hidden; z-index:16;"> ～と記述しております。本文・背後の文と何枚か文を重ねていてメニューのボタンをクリックすると入れ替わるようにしたいのですができますでしょうか？ちなみにFlashで作成したボタンではなく、ただの文字や普通の画像であれば出来ました。

webサイトで文字にマウスを重ねた時に文章を表示させたい

ウェブサイトで、JavaScriptを使用し、「挨拶」の文字にマウスを重ねた時、「こんばんは。」と表示されるようにしたいのですが、上手くいきません。下記は私が記述したソースになります。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <html> <head> <title>テスト</title> <script language="JavaScript">  </script> </head> <body ONLOAD="preloadImages();">  <div id="link2" style="position:absolute; width:600px; height:80px; z- index:1; left: 80px; top: 600px; visibility: hidden"> こんばんは。</div>  <a href="http://www.geocities.co.jp/Milkyway/1958/" onMouseOver="Lay_View('link2','visible');Lay_View('linka','hidden');" onMouseOut="Lay_View('link2','hidden');Lay_View('linka','visible');" > 挨拶</a> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーこの場合IEでは、ちゃんと表示されるのですが、Firefox等で見た場合、何も表示されません。どうすれば、他のwebブラウザにも対応できるのでしょうか？ JavaScriptは初心者なので、修正すべき場所とコードを詳しく教えて頂けると助かります。よろしくお願い致します。

スクリプトの入れ方で教えて下さい

文字（例：あいうえお）にマウスを重ねると画像が表示されるスクリプトを以下のように書き込みました。一箇所はこの通りで正常にできたのですが、同じページ内に数箇所同じスクリプトを有効にさせるためにはどうしたらよいのでしょうか？また、以下のスクリプトの場合で画像が表示される位置を指定したいのですが可能でしょうか？（右側に表示・・・等）よろしくお願いいたします。 <script language="javascript">  </script> <P align="center"><FONT size="2"> <A HREF="#" onMouseMove="changeVis('image', true)" onMouseOut="changeVis('image', false)">あいうえお</A> </F></P> <IMG SRC="画像.gif" STYLE='visibility:hidden' id='image'></DIV>

ネスケ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>

初期画像にレイヤーが出てしまう

ＨＰにレイヤー設定をしたところ、画像を開けるとすぐレイヤーが出てしまいます。しかし、その画像でマウスを重ねたり外したりすれば、問題なく作動します。その後、ＨＰを開けると、また最初だけレイヤーが表示されてしまいます。どのようにしたら、最初の画面で表示されないようになるでしょうか？よろしくお願い致します。次のように設定しています。 <script language="JavaScript">  </script> <div id="ABC" style="position:absolute; width:350px; height:30px; z-index:1; left: 80px; top: 210px">あいうえお</div> <a href="index1.html"onMouseOver="Lay_View('ABC','visible');"onMouseOut="Lay_View('ABC','hidden');">AIUEO</a> これだけです。何か足りないでしょうか？

popupウィンドウでborderがcollapseなテーブル利用の問題

popupウィンドウにテーブルを使用していて、 border-collapse: collapse　のボーダーがある場合に、初期表示時点で、そのボーダーのみが表示されてしまいます。 firefox,operaでは起きずIE6で起きます。そこで非表示にするためのjavascript をonloadで動かしているのですが、データ量の大きいページだと、表示された後に消えるのが見えてしまい不細工です。最初から枠が表示されないようなcssの指定方法はないでしょうか。 <html> <head> <script>  </script> <style>  </style> </head> <body onload="PopupOff('poplink')" > <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> </body> </html>

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

すみません。まったくのしろうとです。教えてください。会社の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エディタ上でイロイロやってみましたが、うまくいきません。この部分をテキストに変える方法を教えていただけないでしょうか？どうかよろしくお願いします。

NN7.0でレイヤーの表示・非表示

レイヤーの表示・非表示のスクリプトなんですが、 function OpenLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="visible"; } //IEの場合 else { content_menu.style.visibility="visible"; } } function CloseLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="hidden"; } //IEの場合 else { content_menu.style.visibility="hidden"; } } に書きました。 IE6.0では動作しますがNN7.0では何も起こりません。どなたかどのように表記をすればいいのか教えてください。よろしくお願いします。

この部分をスタイルシート書きには？

1台のPCをサーバ＆クライアントにしています。ただ今PHPとPostgresqlの勉強をしています。いつも質問に答えてくれてありがとうございます。以下のソースは、他の質問を参考にしてテーブル上でカーソルをのせるとその行の色が変化するものです問題なのは print("<tr bgcolor='yellow' onMouseover=this.style.backgroundColor='gold' onMouseout=this.style.backgroundColor='yellow'>"); の部分をスタイルシートで書きたいのですがどのようにすれば宜しいですか？－－－－－－－－－－－－－－－－－－－－－－－－－－－ <?PHP print("<table border=1 width='90%' cellpadding=3 cellspacing=0>"); この部分をスタイルシートで書きたい print("<tr bgcolor='yellow' onMouseover=this.style.backgroundColor='gold' onMouseout=this.style.backgroundColor='yellow'>"); ・・・ print("</table>"); ?>

javascriptの質問です。表示が残ってしまう

オンマウスでサブメニューを出すjavascriptを組んでいます。 Firefox、Safari、Operaで次の行動を起こすとサブメニューが残ったままになります。 IEだと特に問題は有りませんでした。 OSはXPです。・オンマウスでサブメニューが開く・サブメニューのリンクをクリックし、マウスは動かさずサブメニューが表示されたまま次のページへ・ブラウザの戻るで元の画面に戻る・サブメニューが残ったままになっている原因が分かりません。アドバイスお願いします。ソース <style type="text/css"> .mainmenu{ visibility : visible; width:200px; position : relative; z-index: auto; } .submenu{ visibility : hidden; width : 200px; top : -10px; left : 100px; position : absolute; background-color:#FFF; padding:10px; border:1px solid #CCCCCC; z-index: 1; line-height:1.5em; } </style> <SCRIPT language="JavaScript">  </SCRIPT> <div class="mainmenu" onmouseover="showMenu('treeMenu1')" onmouseout="hiddenMenu('treeMenu1')"> <a href="URL1">■ <strong>メインメニュー１</strong></a> <div class="submenu" id="treeMenu1"> <div><a href="URL1-1">サブメニュー１</a></div> <div><a href="URL1-2">サブメニュー２</a></div> <div><a href="URL1-3">サブメニュー３</a></div> </div> </div>

ドロップダウンメニューのプログラム改善

このプログラムを改善してくれませんか？。

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

お礼 2011/10/27 19:39

その他の回答 (1)

関連するQ&A