- ベストアンサー
プルダウンからの背景色変更
題名の通りなのですが、プルダウンさせてその中の選択項目から色を指定したら、背景がかわるというものをつくりたいのですが、可能なことなのでしょうか？ もしわかればやり方を教えてください。困ってます。。
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <script language="javascript"> <!-- function s1_chg(val){ var i=document.f.s1.options[val].value; document.body.style.backgroundImage='url('+i+')'; } function s2_chg(val){ var i=document.f.s2.options[val].value; document.body.style.backgroundColor=i; } //--> </script> </head> <body style="background-image:url(''); background-color:#ffffff;"> <form name="f" id="f"> <select id="s1" name="s1" onChange="s1_chg(this.selectedIndex);"> <option value="" selected>背景画像を選択してください。</option> <option value="a.gif">A</option> <option value="b.gif">B</option> <option value="c.gif">C</option> </select> <br> ※背景画像を表示すると、背景色が表示されません。<br> ※背景画像を透過GIFにすると、画像の背景部分に背景色が表示されます。 <hr> <select id="s2" name="s2" onChange="s2_chg(this.selectedIndex);"> <option value="" selected>背景色を選択してください。</option> <option value="#ffcccc">R</option> <option value="#ccffcc">G</option> <option value="#ccccff"">B</option> </select> <br> ※背景画像が表示されているときは、背景色が表示されません。 </form> </body> </html>
その他の回答 (2)
- ittochan
- ベストアンサー率64% (2667/4137)
背景色を変えるのね。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function select1_onchange() { var s = select1.options(select1.selectedIndex).value; if (s == ""){return;} document.bgColor = s; } //--> </SCRIPT> </HEAD> <BODY> これはどうでしょう？<br> InternetExplorerでしか動かないでしょう<P> <SELECT id=select1 style="WIDTH: 200px" name=select1 LANGUAGE=javascript onchange="return select1_onchange()"> <OPTION value="" selected>色を選んでね</OPTION> <OPTION value=black>黒</OPTION> <OPTION value=red>赤</OPTION> </SELECT></P> </BODY> </HTML>
お礼
だいたいやり方などがわかりました。本当にありがとうございます。私のホームページで活用したいと思います
- ittochan
- ベストアンサー率64% (2667/4137)
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function select1_onchange() { img.innerHTML = "<IMG style='Z-INDEX: -1; LEFT: 0px; POSITION: absolute; TOP: 0px' src='" + select1.options(select1.selectedIndex).value + "'>"; } //--> </SCRIPT> </HEAD> <BODY> <P id=img> これはどうでしょう？<br> InternetExplorerでしか動かないでしょう<P> <SELECT id=select1 style="WIDTH: 200px" name=select1 LANGUAGE=javascript onchange="return select1_onchange()"> <OPTION value="" selected>画像を選んでね</OPTION> <OPTION value=sample1.jpg>sample1</OPTION> <OPTION value=sample2.jpg>sample2</OPTION> </SELECT></P> </BODY> </HTML>
お礼
大変参考になりました。ありがとうございました