HTMLの記述でセルの背景色を変える方法について

このQ&Aのポイント
  • HTMLの記述で、カーソルをテーブルに合わせた時に背景色が変わる方法について質問があります。IEのActiveXコントロールが働いてしまい、セルの色が変わらない現象が発生します。
  • ActiveXコントロールが働かないようにする方法についての質問です。セキュリティ保護のためにIEで制限されているため、セルの色が変わりません。
  • また、onmouseover以外の方法でセルの色を変化させる方法についても質問があります。ActiveXコントロールを回避できるような解決策を教えてほしいです。
回答を見る
  • ベストアンサー

htmlの記述で、カーソルをテーブルに合わせた時に背景色が変わる様にし

htmlの記述で、カーソルをテーブルに合わせた時に背景色が変わる様にしたいので、 <td align="center" width="33%" height="22"bgcolor="#3399cc" style="color:#ffffff;font-weight:bold;" onmouseover="this.style.backgroundColor='#ff80c0'" onmouseout="this.style.backgroundColor='#3399cc'"> とonmouseoverを使った方法で記述しているのですが、なぜか、IEのActiveXコントロールが働き、ブラウザのページの上に 「セキュリティ保護のため、このコンピュータにアクセスする可能性のあるスクリプトやActiveXコントロールを実行しないよう、InternetExplorerで制限されています。」 というメッセージが出てしまいます。 マウス操作でブロックされているコンテンツの許可をすると、意図したとおりにセルの色が変わるのですが、許可をしないとセルの色は変わりません。 他の方法がないかとWEB検索をしたのですが、WEB上の他のページでonmouseoverを解説しているページを開いてもActiveXコントロールのメッセージは表示さず、解説しているWEBページ内のサンプルのセルの色変化も正常に動作しています。 自分のパソコンの設定が何かおかしいのかと思い、会社のパソコンでも試してみたのですが、自分のパソコン同様ActiveXコントロールが働いてしまいます。 質問が2つあります。 1.ActiveXコントロールが働かないようにするにはどうしたらいいのでしょうか。 2.ActiveXコントロールを回避できて、onmouseover以外の方法でセルの色を変化させる方法があるのでしょうか。 です。 よろしくお願いします。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

1、ローカル環境だから・・・ 2、bgcolor="#3399cc"などを削除してからCSSで統一   以下のようにまとめると、スッキリするでしょう。 <table><tr><td> 例1 </td><td> 例2 </td></tr></table> td { width:33%; line-height:2; text-align:center; color:#FFF; font-weight:bold; background:#39c;} td:hover { background:#ff80c0;} /* ie6未 */

pentakun
質問者

お礼

回答ありがとうございます。 会社のネットワーク上のホルダーに保存し直して試したところ、症状が発生しなくなりました。 原因の一つがローカル環境だからというのがあったようです。 ただ一つ良く分からないのが、昔作ったホームページのデータでも同じ記述を使っていたので、ハードディスクのゴミになっていたデータを開いたところ、何ら問題なく開く事が出来たので、単にローカル環境がまずいわけでもなさそうです。 原因が分かりませんが、とりあえずネットワークに移すことで症状が出なくなるのであれば問題が無いのと同じため、安心しました。

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

「...可能性のあるスクリプトやActiveXコントロールを実行しないよう...」 ActiveXだけでなく、javascriptやJscript、Vbscriptも全てオフにしてるんじゃ ないですか? onmouseover="this.style.backgroundColor='#ff80c0'" はjavascriptです。 あなたのPCだけですよ!

pentakun
質問者

お礼

回答ありがとうございます。 質問の説明でも書きましたが、会社のPCでも試しましたし、WEB上の同様ページでは何ら問題が出ていない事と辻褄が合いません。 会社のネットワークドライブ上のホルダーに保存先を変えたら問題が発生しなくなり、ローカル環境だったことが一つの要因になっていた様です。

関連するQ&A

  • onMouseoverを利用して、セル内の背景色と文字を反転させたい

    テーブルで各セルに別ページへのリンクのリストを作成しています。 onMouseover と onMouseout でマウスが上に来た時に色を変えるようにしたいのですが、背景色の変更は出来ます。 onMouseover="this.style.backgroundColor='#3a5b88'" のようにして。 問題は文字色でして、こちらの変え方が分かりません。スタイルシートでも設定しているので、文字の上にポインタが来ればスタイルシートの指定通りに色を変えられますが、タイトルにも書いたように、onMouseover時には背景色と文字色を反転させるように考えているので、セル内の文字から離れた位置にポインタが来た時には背景色が文字色に変わる(つまり文字色はそのままなので同じ色になる)ので、文字が消えてしまうのです。 なにか良い方法がありましたら教えてください。

  • 条件にあったテーブルのセルを数える

    テーブルを作り、それぞれのセルをonmouseoverすると背景が変わるようになっています。そして、背景が変わった後に、何個のセルの背景が変わったのかを知りたいのですが、どうもうまくいきません。alertで確認してもいつも「0」として出てきます。お手数ですが、ご指導お願いします。 <script type="text/javascript"> function bgSwap(TD) { if(window.event.shiftKey == true) { if(TD.style && TD.style.backgroundColor){ TD.style.backgroundColor = ''; } else{ TD.style.backgroundColor = '#000000'; } } } function sendToparent(){ var count=0; var i; var tdname = document.getElementById('F1table').getElementsByTagName('td'); for (i=0; i < tdname.length; i++) { if(tdname[i].style.backgroundColor == "#000000"){ count = count+1; }else { count = count; } } alert(count); } </script> <body> <input type='button' value='set' onclick='sendToparent()'> <table id='F1table' border="0" bordercolor = '#000000' > <tr> <td onmouseover="bgSwap(this)" width="35" height="35"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> </tr> </table> </body>

  • マウスがinput,textarea,の上にのったときに背景画像を表示させたい

    たとえばマウスが上にのったときに色を変えるには下のソースを使ってるんですが、 <input type="submit" name="submit" value="DELETE"onmouseover="this.style.backgroundColor='#ffcee7'" onmouseout="this.style.backgroundColor='#FFFFFF'"> 背景画像を表示させたいときはどうやったらいいですか? おねがいします。

  • テーブルリンクで別ウインドウで開くようにするには?

    <table> <tr> <td onClick="window.location.href='a.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> このようにしてオンマウスでTD内の色を変え、TD全体でリンクさせる時、別ウインドウで開くにはどうしたらよいですか? それとも、テーブルリンクで別ウインドウで開く指定は出来ないんでしょうか? <table> <tr> <td onClick="window.location.href='a.html' XXXXX" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> XXXXXの部分にtarget='_blank'と入れてみたんですが、今度はリンクのアクションすらしなくなってしまいました。 よろしくお願いします。

  • 数カ所のフォームボタンにonMouseOverを一括指定

    //外部スタイルシート抜粋 .button{ color:#000000; background-color:#ffec93; border:1px solid #ffbb55; } //HTML本文抜粋 <INPUT class=button onmouseover="this.style.backgroundColor='#FFDF48'" onfocus="this.style.backgroundColor='#FFDF48'" onmouseout="this.style.backgroundColor='#ffec93'" type=submit value=送信> 上記のように、外部スタイルシートとHTML直接記述で、マウスカーソル操作により色変化をするフォームボタンが、同一ページ内に数カ所あります。 全部の箇所が同じ効果なので、外部スタイルシートのようにHTMLに直接記述しているonMouseOver等を一括指定できれば非常に便利なのですが、これを実現する方法はないものでしょうか。

    • ベストアンサー
    • HTML
  • テーブルリンクに付いて

    下記のテーブルリンクを作成しましたがクリックしても説明文が表示されません どなたか教えて下さい <p align="center"> <TABLE HEIGHT=30 BORDER=1 BGCOLOR="#FFFFFF" CELLSPACING=0> <TR> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='http://uye43ys.dousetsu.com/simpleVC_20110728074105.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">特典サービス</TD> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='http://uye43ys.dousetsu.com/simpleVC_20110728075504.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">車検費用</TD>

  • HTML罫線の行にmouseoverで行全体の背景色を変えるスクリプト

    罫線の行<tr>~</tr>に、マウスが乗ると ハイライトされるような仕組みのサンプルプログラム使い、 具体的には、こうして、highlight.htcを呼び出しています。 <tr style='behavior:url(highlight.htc);'> ◆質問◆ ところが、↓のようにすると、 (1) Aにカーソルを乗せる⇒A、Bにハイライト (2) Bにカーソルを乗せる⇒Bだけにハイライト (3) Cにカーソルを乗せる⇒Cだけにハイライト となりますが、(1)のケースでもBだけにハイライトを当てる (=セルAにだけは常にハイライトをあてない) ようにするのはどうしたらよいでしょうか。 よろしくお願い致します。 <table> <tr style='behavior:url(highlight.htc);'> <td rowspan="2"></td> <td></td> </tr> <tr style='behavior:url(highlight.htc);'> <td></td> </tr> </table> ┏━┳━┓ ┃ ┃B┃ ┃A┣━┫ ┃ ┃C┃ ┗━┻━┛ -----------------------------highlight.htc <script type="text/javascript"> <!-- attachEvent("onmouseover", detailTr_onmouseover); attachEvent("onmouseout", detailTr_onmouseout); function detailTr_onmouseover() { this.style.backgroundColor='#000000'; } function detailTr_onmouseout() { this.style.backgroundColor='transparent'; } --> </script> ------------------------------

  • この部分をスタイルシート書きには?

    1台のPCをサーバ&クライアントにしています。 ただ今PHPとPostgresqlの勉強をしています。 いつも質問に答えてくれてありがとうございます。 以下のソースは、他の質問を参考にして テーブル上でカーソルをのせると その行の色が変化するものです 問題なのは print("<tr bgcolor='yellow' onMouseover=this.style.backgroundColor='gold' onMouseout=this.style.backgroundColor='yellow'>"); の部分をスタイルシートで書きたいのですが どのようにすれば宜しいですか? --------------------------- <?PHP print("<table border=1 width='90%' cellpadding=3 cellspacing=0>"); この部分をスタイルシートで書きたい print("<tr bgcolor='yellow' onMouseover=this.style.backgroundColor='gold' onMouseout=this.style.backgroundColor='yellow'>"); ・ ・ ・ print("</table>"); ?>

    • ベストアンサー
    • HTML
  • tableの各セルに同じ関数を対応させたい

    いつもお世話になっております。 今回はテーブルの各セルに同じ関数を対応させたいのですがいい方法が思い浮かばなかったので、そこをお聞きしたいです。 function swap(TD) {  if(TD.style && TD.style.backgroundColor)  {   TD.style.backgroundColor = '';  }  else  {   TD.style.backgroundColor = '#ff0000';  } } (略) <TD onclick="swap(this)"><INPUT type="hidden" name="xxx01" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx02" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx03" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx04" value="0"></TD> swapという関数はセルの色を白と赤に交互に変えるものですが、ここにセルが白なら0を、赤なら1を各テキストに入れるという処理を加えたいです。 しかしながらnameがちょっと違うので一つ一つ関数を作らなくてはいけないのかと思っています。 nameのxxxの部分は共通で、お尻の数字が変わっていきます。 この規則性を使って何とかうまい方法はありませんでしょうか? ご教授お願いします。

  • テーブルの背景色を複数変更する

    テーブルにて、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');">ここ1</td> <td>ここ2</td> </tr> <tr> <td>ここ3</td> <td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ4</td> </tr> </table> </body> </html>

専門家に質問してみよう