- 締切済み
プルダウンメニューに画像を使用するには？
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>
- rei-tcd
- お礼率86% (26/30)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- papillon68
- ベストアンサー率61% (42/68)
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>
- papillon68
- ベストアンサー率61% (42/68)
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>
お礼
ご回答、ありがとうございます。 ↑こちらでやってみました。 まさしくこれです！私が望んでいたのは。