• 締切済み

プルダウンメニューに画像を使用するには？

JavaScript初心者です。 過去の質問 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1886905 にあるソースを利用してみたいのですが、メニューの頭にあるボタンを画像（オリジナルのアイコン）に変えたいのですが、どのようにすればよいでしょうか？ ボタンのタグはなんとなく分かるのですが、差し替え方が全く分かりません。 ↓これが、そのソースです。宜しくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>サンプル</title> <style> <!-- div.inside { padding-left:1em; display:none; } --> </style> <script type="text/javascript"> <!-- function changeFold(f){ if(f.value == "＋"){ f.value="－"; f.parentNode.childNodes.item(2).style.display="block"; } else { f.value="＋"; f.parentNode.childNodes.item(2).style.display="none"; } } //--> </script> </head> <body> <div><input type="button" value="＋" onClick="changeFold(this)">メニュー１<div class="inside"> もろもろ<br /> <a href="index.html">トップ</a><br /> <a href="sub.html">サブ</a><br /> </div> </div> <div><input type="button" value="＋" onClick="changeFold(this)">メニュー２<div class="inside"> また別のもろもろ<br /> <a href="index2.html">トップ２</a><br /> <a href="sub2.html">サブ２</a><br /> </div> </div> </body> </html>

回答 全件
type="button" 　↓ type="image" …
rei-tcdさんこんにちは、papillon68と申します。 …

みんなの回答

回答No.2

type="button" 　↓ type="image" とするだけでもいいです(@＾－＾@) <script type="text/javascript"> <!-- function changeFold(f){ if(f.src.match(/a\.gif$/)){ f.src="b.gif"; f.parentNode.childNodes.item(2).style.display="block"; } else { f.src="a.gif"; f.parentNode.childNodes.item(2).style.display="none"; } } //--> </script> </head> <body> <div><input type="image" src="a.gif" onClick="changeFold(this)">メニュー１<div class="inside"> もろもろ<br /> <a href="index.html">トップ</a><br /> <a href="sub.html">サブ</a><br /> </div> </div>

rei-tcd
質問者

お礼

ご回答、ありがとうございます。 ↑こちらでやってみました。 まさしくこれです！私が望んでいたのは。

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

rei-tcdさんこんにちは、papillon68と申します。 ボタンのタグをイメージのタグに入替えてみてはいかがでしょうか。 例えば、次のような感じです。 <script type="text/javascript"> <!-- function changeFold(f){ //if(f.value == "＋"){ //f.value="－"; //f.parentNode.childNodes.item(2).style.display="block"; //} else { //f.value="＋"; //f.parentNode.childNodes.item(2).style.display="none"; //} if(f.src.match(/a\.gif$/)){ f.src="b.gif"; f.parentNode.childNodes.item(3).style.display="block"; } else { f.src="a.gif"; f.parentNode.childNodes.item(3).style.display="none"; } } //--> </script> </head> <body> <!--<div><input type="button" value="＋" onClick="changeFold(this)">メニュー１<div class="inside">//--> <div><img src="a.gif" onClick="changeFold(this)"></img>メニュー１<div class="inside"> もろもろ<br /> <a href="index.html">トップ</a><br /> <a href="sub.html">サブ</a><br /> </div> </div>

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • プルダウンメニューについてです。

    プルダウンメニューについてです。 http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっています。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </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> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。（”メニューを表示する”のページを作りたい。） どうしたらよいでしょうか?よろしくお願いします。

  • プルダウンメニューについて

    ジャバスクリプトが全くの初心者です。 プルダウンメニューをつくりたくて http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっていますが、 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </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"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; flag = false; function pullDown() { if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag; } //--> （ＩＤの部分を変更しています。） こう書いてみましたがダメでした。 とても困っています、どなたか助けてください。よろしくお願いいたします。

  • プルダウンメニューの表示

    +の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
  • onMouseoutの有効な範囲

    初期状態：aaaという文字のみ表示 動作：aaaをクリックするとその下にbbb,cccというリンクが現れ、これら（aaa,bbb,cccの領域）からマウスアウトしたら、bbb,cccが消える というものを作る為に、以下のコードを書いてみました。 <div onMouseout="this.childNodes[1].style.display='none'"><p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p><ul style="display:none;"><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li></ul></div> 「ブラウザによりノードのカウント方法が異なり挙動が変わる」のを防ぐために改行をなくしましたが、見やすくするとこうなります↓ <div onMouseout="this.childNodes[1].style.display='none'"> <p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p> <ul style="display:none;"> <li><a href="#">bbb</a></li> <li><a href="#">ccc</a></li> </ul> </div> これを実際に試してみると、aaaを押してリンクbbb,cccが出てきたのは良いものの、 リンクをクリックするためにマウスをbbb,cccへ移動しようとすると、 aaaから離れた時点でbbb,cccが消えてしまいます。 「div全体に」”マウスアウトしたらbbb,cccが消える”というつもりで上記のソースを書いたのですが、 divのonMouseoutはpからマウスアウトしても働いてしまうのでしょうか。 どのように修正したらよいか試行錯誤中です。 解決策があれば、どうぞよろしくお願いします。

  • ホームページ作成　ツリーメニュー

    ホームページビルダー15を使っています。 タグ（ｈｔｍｌ）の位置が無効です。 と構文エラーが出てしまいます。 エラー箇所は、<body> です。 どこを修正すればいいでしょうか？？解決法を教えてください。 初心者ですので、わかりやすく教えていただければ有難いです。 <html> <head> <title>階層メニュー</title> <SCRIPT Language="JavaScript"> <!-- function myMenu(num){ obj=document.all[num].style; flag=obj.display; if(flag=="none"){ obj.display="block" }else{ obj.display="none" } } // --> </SCRIPT> </head> <body> <a href="JavaScript:void(0)" onClick="myMenu('M1');return false">CD</a><br> <span id="M1" style="display:none"> ├<a href="test_page1.html">新品ＣＤ</a><br> └<a href="test_page1.html">中古ＣＤ</a><br> </span> <br> <a href="JavaScript:void(0)" onClick="myMenu('M2');return false">DVD</a><br> <span id="M2" style="display:none"> ├<a href="test_page1.html">メニュー４</a><br> ├<a href="test_page1.html">メニュー５</a><br> └<a href="test_page1.html">メニュー６</a><br> </span> <br> <a href="JavaScript:void(0)" onClick="myMenu('M3');return false">VHS</a><br> <span id="M3" style="display:none"> ├<a href="test_page1.html">メニュー７</a><br> ├<a href="test_page1.html">メニュー８</a><br> └<a href="test_page1.html">メニュー９</a> </span> </body> </html>

  • CSSのプルダウンメニュー

    menu1とmenu2の挙動について疑問があります。 添付画像をご覧ください。 menu2からsub4-1を選択している状態です。 この時、menu2の背景色が赤に戻らないのは仕様でしょうか？ それとも何か間違っているのでしょうか？ 背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。

    • 締切済み
    • CSS
  • JavaScriptによる疑似プルダウンメニュー

    他の方が作成したサイトの管理を引き継ぎ更新していますが、サイドメニューに使用されているJavaScriptがわかりません。 現在のサイドメニューは、以下のようになっています。 ●米 ●果物 　○いちご　←初期状態は”display: none”、「果物」クリックで展開 ●野菜 　○トマト　←初期状態は”display: none”、「野菜」クリックで展開 ●味噌 この小要素を、以下のように増やしたいのです。 ●果物 　○いちご 　○りんご 　以下、数は可変 現在の該当部分のソースは、 【HTML】 <ul id="menu"> <li><a href="kome.html">米</a></li> <li><a href="#" onclick="kudamonoshow();">果物</a></li> 　<li id="line1" style="display: none;"><a href="kudamono01.html">　いちご</a></li> <li><a href="#" onclick="yasaishow();">野菜</a></li> 　<li id="line2" style="display: none;"><a href="yasai01.html">　トマト</a></li> <li><a href="miso.html">味噌</a></li> </ul> 【JS】 function kudamonoshow() { if (document.getElementById('line1').style.display == 'none') document.getElementById('line1').style.display='block'; else document.getElementById('line1').style.display='none'; } function yasaishow() { if (document.getElementById('line2').style.display == 'none') document.getElementById('line2').style.display='block'; else document.getElementById('line2').style.display='none'; } このソースで何が起きているかは理解しましたが、項目の増やし方が分かりません。 IDはページに一つということなので、試しにHTMLを <li><a href="#" onclick="kudamonoshow();">果物</a></li> <div id="line1" style="display: none;"> 　<li><a href="kudamono01.html">　いちご</a></li> 　<li><a href="kudamono02.html">　りんご</a></li> </div> と、隠したい部分に強引にdivを使いIDを指定したところ、FireFox（Win&Mac）およびSafari（Mac）では正常に動作しますがIE7では動作せず、常に全てのリストが表示されている状態になり、レイアウトも崩れてしまいます。 （IE6は現在手元にありません） IEでも動作させるにはどうしたらいいのでしょうか？ リストタグを使わない疑似プルダウンのソースは見つけましたが、このサイトでは他にもプログラムが色々動いているので、できれば変更は最小限にしたいと考えています。 足りない情報がありましたら追加します。よろしくお願いします。

  • メニューバーを製作しています　

    今　メニューバーを製作しています 検索サイト１ 検索サイト２ 検索サイト３ すべて、サイドページ付です ここまでコピーや改造で出来ました 解らない事 １　検索サイト１をクリックし次に検索サイト２をクリックした時に検索サイト１が 　　自動で閉まる用にしたいのですが、上手く出来ません アドバイスを願いします JavaScript・HTML・ｓｃｃ　ソースです よろしくお願いします <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </HEAD> <BODY bgcolor="white"> <div><A href="javaScript:exMenu('treeMenu')">＋■検索サイト1</A><br> <div id="treeMenu" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu1')">＋■検索サイト2</A><br> <div id="treeMenu1" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu2')">＋■検索サイト3</A><br> <div id="treeMenu2" style="display:none"> ├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> </div>

    • 締切済み
    • CSS
  • プルダウンのメニュー表示について

    JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 　●メニュー1-1　　●メニュー1-2 　●メニュー1-3　　●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> 　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> 　　<div class="tree_sub"> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-1</li> 　　　　　　<li>●メニュー1-2</li> 　　　　</ul> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-3</li> 　　　　　　<li>●メニュー1-4</li> 　　　　</ul> 　　</div> </div> <div class="tree"> 　　<a href="#">○メニュー2</a> </div> [css] div.tree { 　　border-bottom:1px solid #000000; 　　width:365px; } div.tree_sub ul li { 　　float:left; } div.tree_sub ul li.left { 　　width:50%; }

  • プルダウンメニューを表の中に入れるには？

    下記のソースに表記されているプルダウンメニューを 同じく下記に表記されている表の中に埋め込むにはどうしたら 良いのでしょうか？ ご存知の方がいらっしゃいましたら、教えていただけると大変 ありがたいです。宜しくお願いします。 <html> <head> <title></title> <style> <!-- #MainMenu { background-color:lightsteelblue; color:black; position:absolute; z-index:99; } #SubMenu { background-color:lightsteelblue; color:black; display:none; } a.SubMenu { color: gray; text-decoration:none; font-weight:bold; } a.SubMenu:hover { color: black; } --> </style> <LINK rel="stylesheet" href="table.css" type="text/css" id="TABLE_CSS_ID_"> </head> <body> <table id="MainMenu" border="0" cellpadding="0" cellspacing="0"> <tr> <TD onmouseover="document.getElementById('SubMenu').style.display='block'" onmouseout="document.getElementById('SubMenu').style.display='none'"> <span class="SubMenu" style="color:Navy;font-weight:bold;">メインメニュー</span> <div id="SubMenu"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td> <A class="SubMenu" href="submenu1.html">サブメニュー１</A><br> <A class="SubMenu" href="submenu2.html">サブメニュー２</A><br> <A class="SubMenu" href="submenu3.html">サブメニュー３</A> </td> </tr> </table> </div> </TD> </tr> </table> <CENTER> <TABLE border="1" cellspacing="0" cellpadding="2" id="TABLE_1_A_080522104101" class="cnt-tb1"> <TBODY> <TR> <TD class="cnt-tb-cell1" align="center" width="285" height="31"></TD> </TR> </TBODY> </TABLE> </CENTER> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する