ポップアップメニューでテーブル背景色変更
- ポップアップメニューでテーブルの背景色を変更する方法がわかりません。
- http://www.west-mira.jp/javascript/html/4/10/lib_color/bgcolor8/ で配布されているスクリプトを使用して、テーブルの背景色ではなくテーブル自体の背景色を選択した色に変更したいです。
- 他のスクリプトでポップアップメニューの各項目の背景色を選択し、さらにテーブル自体の背景色も変更するものがあれば教えてください。
- ベストアンサー
ポップアップメニューでテーブル背景色変更
http://www.west-mira.jp/javascript/html/4/10/lib_color/bgcolor8/ 上記URLで配布されているスクリプトで 選択したカラーを【背景】ではなく【テーブル】に反映させたいのですが 具体的な記述方法が解りません。 どなたか改造をお願い出来ないでしょうか？（※改造OKのスクリプトです） 上記スクリプトを使いたい理由は ・ポップアップメニューの各項目に背景色が表示される ・ポップアップメニューで背景色を選択出来る の２点です。 なので、もし他に、この２点＋【テーブルに反映】されるスクリプトが ありましたら教えて下さい。 どうか宜しくお願い致します。
- saw666
- お礼率24% (6/25)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
idは基本的に個別のものでなければならないので、重複して同じidを設けるのは不可です。 かわりにclassを利用して、class="t1"と指定することにしましょう。 （class="t1"でないものの背景色がかわりません） オプションをセットする部分をオリジナルからまったく変えてしまいましたが… <html> <head> <script language="JavaScript"> <!-- window.onload = function(){ var col, colN, count, i, elm; col = 'white,gray,black,silver,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teal,aqua'.split(','); colN = '白色,灰色,黒色,銀色,茶色,赤色,紫色,ピンク,緑色,ライム,オリーブ,黄色,紺色,青色,青緑,水色'.split(','); elm = document.getElementById('sel1'); count = col.length>colN.length?colN.length:col.length; for (i=0; i<count; i++) { elm.options[i] = new Option(colN[i],col[i]); elm.options[i].style.backgroundColor = col[i]; } } function BgChange(e) { var col = e.options[e.selectedIndex].value; var tbl = document.getElementsByTagName('TABLE'); for (var i=0; i<tbl.length; i++){ if (tbl[i].className=='t1') tbl[i].style.backgroundColor=col; } } //--> </script> </head> <body> <select name="sele1" id="sel1" onChange="BgChange(this);"> </select> <p> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100" class="t1"> <tr> <td align="center" width="100">no.1</td> <td align="center" width="100"> </td> </tr> </table> <br> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100"> <tr> <td align="center" width="100">no.2</td> <td align="center" width="100"> </td> </tr> </table> <br> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100" class="t1"> <tr> <td align="center" width="100">no.3</td> <td align="center" width="100"> </td> </tr> </table> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
document.bgColor=iro; の部分が背景色を変えているところなので、その対象をお望みのもの（例えばテーブルの背景）となるようにを修正すればよいです。 例示のサイトでは ＞スクリプトについての疑問や質問などがある方はQ&Aをご覧下さい。 とありますし、さらには ＞▲基礎知識、▲基本操作、▲その他 などの基本的な説明も併設してあるようですので、そちらもご覧になるとよろしいかと思います。
補足
試行錯誤して以下の状態の、背景ではなく テーブルに反映させる所までは出来ました。 （JSはコピペ利用ばかりなので、色々間違ってる気がしますが…） で、id="t1"を付けたテーブルが複数ある場合 １個目（no.1）のテーブルにしか反映されないのですが… これを、id="t1"要素のあるテーブル全て（no.2、no.3～）に 反映させるには、どうすればよいのでしょうか？ 御教示頂けれると助かります。 どなたか宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language="JavaScript"> <!--//Copyright (C) WEST MiRa http://www.west-mira.jp ColorsRgb=new Array(); ColorsName=new Array(); //1番目の色の値を指定（色名、もしくはRGB値で） ColorsRgb[0]='black'; //1番目の色の名前を指定 ColorsName[0]='黒色'; //2番目の色の値を指定（色名、もしくはRGB値で） ColorsRgb[1]='gray'; //2番目の色の名前を指定 ColorsName[1]='灰色'; //3番目の色の値を指定（色名、もしくはRGB値で） ColorsRgb[2]='silver'; //3番目の色の名前を指定 ColorsName[2]='銀色'; //ポップアップメニューの項目で背景色を変更する BgFlag=1; function BgColorChange(t1) { iro=document.form1.sele1.selectedIndex; iro=document.form1.sele1.options[iro].value; document.getElementById('t1').style.backgroundColor=iro; } //--> </script> </head> <body> <form name="form1"> <select name="sele1" onChange="BgColorChange();"> <option> <script language="JavaScript"> <!--//Copyright (C) WEST MiRa http://www.west-mira.jp BgMoji=''; for(i=0; i<ColorsRgb.length; i++) { BgMoji='\t<option value="' + ColorsRgb[i] + '"'; if(BgFlag == 1)BgMoji+=' style="background-color:' + ColorsRgb[i] + '"'; BgMoji+='>' + ColorsName[i]; document.write(BgMoji); } //--> </script> </select> </form> ・ ・ ・ <br> <br> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100" id="t1"> <tr> <td align="center" width="100">no.1</td> <td align="center" width="100"> </td> </tr> </table> <br> <table width="200" border="1" cellspacing="0" cellpadding="0" height="100" id="t1"> <tr> <td align="center" width="100">no.2</td> <td align="center" width="100"> </td> </tr> </table> <p> </p> </body></html>
関連するQ&A
- ポップアップメニューAの選択によってポップアップメニューBの内容を変更させる方法
一つのフォーム内にポップアップメニューが２つあり、ポップアップメニューAが変更されたときに、ポップアップメニューBの内容を変更したいのですが、そういうことは出来るのでしょうか。 もし、出来るのであればどのようにすれば出来るでしょうか。 よろしくお願いします。 ＜例＞ ポップアップメニューAの内容 １．選択A ２．選択B ポップアップメニューBの内容 ○ポップアップメニューAで「１．選択A」が選択されているとき １．値A ２．値B ３．値C ○ポップアップメニューBで「２．選択B」が選択されているとき １．結果A ２．結果B ３．結果C
- ベストアンサー
- JavaScript
- Dreamwweaverでのポップアップメニュー作成について
お世話になります。MACOS10,DreamweaverMX2004にてページを作成しております。ビヘイビアからポップアップメニューを作成したいのですが…できません。ポップアップメニューを表示させたいイメージを選択して、ビヘイビアの＋をクリック。そこから「ポップアップメニューを表示」を選択すればいいだけなのでしょうが、「ポップアップメニューの非表示」以降の選択肢が薄いグレーの文字色表示で選択ができない状態なのです（選択可能なビヘイビアは黒文字表示）。イメージには無効リンク（Javascript:;）も張っています。なぜ、「ポップアップメニューを表示」が選択できないのでしょうか？？
- 締切済み
- ホームページ作成ソフト
- ポップアップメニューをテキストで
下記はDreamWeaverMXが書き出したポップアップメニューのスクリプトです。 これはkame2_s.jpgに対してなのですが、画像でなくテキストに対してポップアップしたいのです。 javascriptは良くわからないので、困っています。 CSSでの位置や見栄えの設定は避けたいです。 よろしくお願いします。 ------------------------------------------- <script language="JavaScript"> <!-- function mmLoadMenus() {if window.mm_menu_0515002601_0) return; window.mm_menu_0515002601_0 = new Menu("root",53,18,"",12,"#000000","#FFFFFF","#CCCCCC","#000084","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_0515002601_0.addMenuItem("kame","window.open('1.htm', '_self');"); mm_menu_0515002601_0.addMenuItem("next","location='1.htm'"); mm_menu_0515002601_0.hideOnMouseOut=true; mm_menu_0515002601_0.bgColor='#555555'; mm_menu_0515002601_0.menuBorder=1; mm_menu_0515002601_0.menuLiteBgColor='#FFFFFF'; mm_menu_0515002601_0.menuBorderBgColor='#777777'; mm_menu_0515002601_0.writeMenus(); } // mmLoadMenus() //--> </script> <script language="JavaScript" src="mm_menu.js"></script> </head> <body> <script language="JavaScript1.2">mmLoadMenus();</script> <a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0515002601_0,97,72,null,'image1')" onMouseOut="MM_startTimeout();"><img src="file:///E|/dive/story/kame2_s.jpg" name="image1" width="100" height="75" border="0" id="image1"></a></p> </body>
- ベストアンサー
- JavaScript
- ポップアップメニューのカスタマイズについて
ポップアップメニューのカスタマイズについて ワードで文字列を選択し、右クリックするとポップアップメニューが表示される。そのメニューの内容をカスタマイズしたい。 ポップメニューでフォント、文字サイズ、太字、斜体文字などが選択できるようになっているが、それに下線、傍点などを加えたい。また不必要な文字色、蛍光ペン、段落などは削除したい。 カスタマイズの方法があればお教え願いたい。よろしくお願いします。 OS Windows 7 Word 2007 Atok 2008
- ベストアンサー
- その他(ソフトウェア)
- Dream Weaver MXにてポップアップメニュー
会社のサイトで、ポップアップメニューを使うことになったのですが、ＤＷ上にて説明どおりにやっても表示されません。 説明によると、 <META http-equiv="Content-Script-Type" content="text/javascript">を入れ、 「javascript:;」としたリンク部分を選択してから、 ビヘイビアの「ポップアップメニューの表示」を 選択する、とのことですが、 その部分が灰色表示で、選択できません。 「ポップアップメッセージ」などは表示できるのですが…。 Dreram weaver MX、Windows XPで作業しています。 どなたか解決方法をご存知の方はお教えください。
- 締切済み
- JavaScript
- autohotkeyのポップアップメニューについて
autohotkeyを以下環境で使用しています。 OS: Windows7 64bit autohotkey: Ver 1.0.48.05 やりたい事： 通知領域にあるautohotkeyアイコンを右クリックして、 ポップアップメニューから"Reload This Script"を選びたい (添付画像を参照してください) 以下のようにスクリプトを組みました Ctrl+Alt+vにて起動 autohotkeyアイコンは、座標(1000, 800)にあるとします。 ^!v:: MouseClick, RIGHT, 1000, 800, , 5 Sleep, 1000 Send, r return 実行すると右クリックのポップアップメニューまでは表示されるのですが、 "Send, r"が実行されず、"Reload This Script"が選べません。 ※この状態で、手動で"r"キーを押すと、きちんと"Reload This Script"が実行されます 通知領域アイコンを右クリックして出てくるポップアップメニューにコマンドを通すのは、 "Send, r"ではなくて特別なコマンドが必要なのでしょうか？ 以上、よろしくお願いいたします。
- ベストアンサー
- その他(ソフトウェア)
- テーブルの背景色を複数変更する
テーブルにて、onMouseOverで背景色を変え、 onMouseOut にて背景色を戻すスクリプトを作っています。 セル一つならば変更できますが、複数のセルに依存関係があり、依存関係があるセル同士はそのセルにマウスオーバーされると依存関係があるセル全ての色を変更したいと思っています。 いろいろと探しているのですが、見つかりません。 以下のようなサンプルで 1 と 4 が一緒に変更できないものでしょうか。 よろしくお願いします。 <html> <head> <title>テーブルの色を変える</title> <script language="JavaScript"> <!-- // b_color(idname,cn); // 背景色を変える // idname: 色変更したいタグid； // cn：色変更法 function b_color(idname,cn) { // alert(idname); // debug alert if (document.getElementById) { document.getElementById(idname).style.backgroundColor = cn; }else{ // alert("あなたのブラウザには対応しておりません。"); } } if (! document.getElementById) { document.write("あなたのブラウザには対応しておりません。マウスを動かしても色は変えられません。<br>"); // マウス移動でいちいちalertが出ると煩わしいので、最初に表示しておく } //--> </script> </head> <body> <table border="1"> <tr> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ１</td> <td>ここ２</td> </tr> <tr> <td>ここ３</td> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ４</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- 背景色変更のJavaScriptに手を加えて頂けませんか？
<SCRIPT language="JavaScript"> <!-- function setBackgroundColor(pal) { document.bgColor=pal; } // --> </SCRIPT> <a href="javascript:setBackgroundColor('#FFFFFF')"><font color="#FFFFFF">背景色変更！</font></a> 上記は、クリックすることで背景色を変えるスクリプトですが、 これにちょっと手を加えてみたくて質問しました。 一つのページの中に、インラインフレーム（名称：f1）があります。上記スクリプトの「背景色変更！」をクリックしたとき、インラインフレーム内の背景色も同時に変えるにはどうしたらいいのですか？
- 締切済み
- JavaScript
- FileMakerProで、ポップアップメニューの絞込みについて。
私は、PCのインフラ整備の仕事をしているものです。 最近、作業の記録をFileMakerで整理していたのですが、解らない部分が出てきたのでどなたか教えて下さい。 作業記録には、お客様の名前を入力する欄があり、これは「お客様情報テーブル」から一覧を作成し、ポップアップメニューで選択するようにしています。 選択すると同時に、お客様の住所や電話番号が入力されます。 作業記録には、契約番号を入力する欄があります。一人のお客様が複数の契約を結ぶ可能性があるためです。契約番号は、「契約番号テーブル」から一覧を作成し、選択できるようにしています。 同時に、契約期間など他の情報も入力してくれます。 契約番号は、一人のお客様に対して複数存在する場合がります。これは一人のお客様が複数の仕事を依頼する事があるためです。逆に、一つの契約番号が複数のお客様に関わる事はありません。 テーブルは、以下の三つがります。 「作業記録テーブル」 「お客様情報テーブル」 「契約番号テーブル」 リレーションは、全てお客様の名前でつなげています。 さて、今抱えている問題なのですが、 契約番号をポップアップメニューで選択する場合、全ての契約番号が出てきてしまうのです。 リレーションを結んでいるので、お客様を選択した時点で、該当するお客様の契約番号しか出てこないと考えていたのですが、そうはなりませんでした。 つまりは、契約番号のポップアップメニューを、お客様の名前を選択した時点で絞り込みたいのです。 非常に解りづらい質問で申し訳ないのですが、どなたか教えて頂けないでしょうか。
- ベストアンサー
- その他(業務ソフトウェア)
- ポップアップメニューのリンク先はhttp://だけ
Macromedia Fireworks 8 スーパーリファレンス を使用して、作成しています。 Macromedia Fireworks 8でポップアップメニュー を作成しています。 一つのメニュー(リンク先:http://www.yahoo.co.jp) を選択すると、Yahoo!JAPANのHPが開きます。 もう一つのメニュー(リンク先:C:\hoge\hoge.html) を選択すると、IE6はまったく反応しません。 Mozilla Firefox2.0で開くと、 "/C:/hoge/hoge.html にはファイルが見つかりませんでした。" と表示されます。 ポップアップメニューのリンク先はhttp://だけ？ なんでしょうか？ お忙しいところ申し訳ございません。 ご教授お願いいたします。
- 締切済み
- グラフィックソフト
お礼
お手を煩わせてすみません。 理想通りの表示になりました、有り難う御座いました。