• ベストアンサー

プルダウンからの背景色変更

godakazの回答

  • ベストアンサー
  • godakaz
  • ベストアンサー率72% (16/22)
回答No.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>

noname#7922
質問者

お礼

大変参考になりました。ありがとうございました

関連するQ&A

  • エクセル プルダウン 背景色指定

    こんにちは。 エクセルのプルダウンリスト機能で、 背景色を指定したいです。 たとえば以下の文言をプルダウンにし、「ばつ」を選択したときに 背景色が赤くなるような。 ・まる ・ばつ ・しかく どなたかご教授ください! よろしくお願いします。

  • プルダウンメニュー項目のフォント色の変更

    JavaScriptで取得した10日後までの日付と曜日をプルダウンメニューの項目に設定し、任意の日付をユーザーに選択し てもらうようにしたのですが、プルダウンメニューの項目の一部(日曜・祝日など)のフォント色を変えることは可能でしょ うか?(あるいは、逆に背景に色を付けるなど) もし、そのような方法がありましたらご教示ください。 よろしくお願いします。

  • プルダウンの選択リストの中に画像を埋め込む(表示する)ことはできますでしょうか

    タイトルのとおりなのですが、 プルダウンのリストは通常、テキストのリストから選択するものですが、 プルダウンの選択リストの中に画像を表示させることはできますでしょうか。 プルダウンフォームのoptionタグやCSSの背景に画像を指定したりしたのですが 表示することはできませんでした。 どなたか実現方法をご存知でしたら教えていただけないでしょうか。 よろしくお願いします!

  • プルダウンメニューの自動変更

    プルダウンメニューAとプルダウンメニューBがあります。 プルダウンメニューAでは「A-1」と「A-2」が、 プルダウンメニューBでは「B-1」と「B-2」が 選択できるメニューとして指定されています。 プルダウンメニューAで「A-1」を選択すればプルダウンメニューBで「B-1」が、 プルダウンメニューAで「A-2」を選択すればプルダウンメニューBで「B-2」が 自動的に選択されるようにプログラムすることは可能でしょうか? どなたかご教授ください。

  • 複数のプルダウンからリンクする方法

    こんにちは、いつもお世話になっています、英行と申します。 今回ご質問させて頂く内容なのですが、複数のプルダウンから指定した場所へのリンク方法?です。 例えば自分のサイト内に3年分の日記があったとします。 その中には12か月分の項目があり、さらに28~31の項目が有ります。 3つのプルダウンを並べ、指定したページへリンクしたいと考えています。 例) 年 月 日 Go といった感じで、2000年の09月の15日というようにプルダウンで選択して Goを押すことによって指定した場所へリンクさせる方法はあるでしょうか? お分かりになる方、教えていただけませんでしょうか? よろしくお願いします。

  • プルダウンリストの背景色の指定

    お世話になります。 現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。 <select> <option style="background-color: #FF0000;">サンプル1</option> <option style="background-color: #00FF00;">サンプル2</option> <option style="background-color: #0000FF;">サンプル3</option> <option style="background-color: #FFFFFF;">サンプル4</option> </select> このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、 上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。 IEとおなじ動きになるようにするには、どうしたらよいでしょうか。 ちなみに、 <select style="background-color: #FF0000"> にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。 と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。 簡単に解決できる方法などございますでしょうか。 もしくは、javascriptで解決できますでしょうか。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • 背景画像の変更と保存

    1.プルダウン(セレクト)メニューで画像名を選択すると、背景画像が変更できる 2.背景画像によって、配置位置を指定できる(右上固定/全面に繰り返し表示等) 3.ブラウザを閉じて開いても、選択した画像が背景に表示される 下記がイメージに近いのですが、2と3の機能がありません。 http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ha/ha-no5_2/ha-no5_2.htm 再現できるスクリプトを紹介して頂けると助かります。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • プルダウンとテキストの連動

    お世話になります。プルダウン1を選択すると、プルダウン2の内容が切り替わり、さらにプルダウン2を選択すると、横のテキストフィールド内にテキストが入る(プルダウン2で選択した項目の説明)というようにしたいのです。プルダウン1をえらぶと2の項目がかわる、まではできたのですが、次のテキスト変更がわかりません。プルダウン3として、そこにテキストを表示させようかと思ったのですが、やはりテキストフィールドにしてほしいといわれてしまいました。。。わかりにくい説明ですみませんが、参考になるサイトなどご存じでしたら教えてください。どうかよろしくお願い致します。

  • プルダウン 背景色の変更

    お世話になっております。 以前こちらで質問させていただき、またつまずいたので質問させてください。 何度も申し訳ございません。 現在、 <script type="text/javascript"> <!-- var bc = ["#FF0000","#00FF00","#0000FF","#FFFFFF"]; function chBackGround(e) { e.style.backgroundColor=bc[e.selectedIndex]; } window.onload = function() { document.getElementById('key').style.backgroundColor=bc[0]; } // --> </script> ------------------------------------------------------------ html部分 <select id="key" name="key" onChange="chBackGround(this)"> <option style="background-color: #FF0000;">サンプル0</option> <option style="background-color: #00FF00;">サンプル1</option> <option style="background-color: #0000FF;">サンプル2</option> <option style="background-color: #FFFFFF;">サンプル3</option> </select> としており、プルダウンで選ばれたカラーのスタイルを<select>タグに埋め込んでおります。 上記だと、この画面を初期表示時、<select>部分に読み込まれるプルダウンの色が、必ずbc[0](サンプル0の色)になります。 例えば、サンプル2のoptionにselectedが記載されていた場合、画面の初期表示はbc[2](サンプル2の色)にしたいのですが、この方法をご教授いただけませんでしょうか。 お忙しいところ申し訳ございません。 どうぞ宜しくお願いいたします。

  • 背景が透明にならない

    pictbearというソフトを使って描いたキャラの背景を透明にしようと手順通りに設定していこうとするのですが「背景を透明にする」という項目が既に選択できなくなっており、クリックすらできない状態になっています windows xpに入っているペイントも同様で「背景の不透明化」という選択肢は出るのですが選択は出来ない状態です さっきからもう二時間近くやっているのですが、どうも理由が分かりません 詳しい方アドバイスいただけないでしょうか?