HTML罫線の行にmouseoverで行全体の背景色を変えるスクリプト
- HTML罫線の行にマウスが乗ると行全体の背景色が変わるスクリプトを使用したいです。
- 罫線の行にhighlight.htcを呼び出してマウスが乗った時にハイライトされるようにしたいです。
- 特定のセルには常にハイライトをあてず、カーソルが乗ったセルのみがハイライトされるようにしたいです。
- ベストアンサー
HTML罫線の行にmouseoverで行全体の背景色を変えるスクリプト
罫線の行<tr>～</tr>に、マウスが乗ると ハイライトされるような仕組みのサンプルプログラム使い、 具体的には、こうして、highlight.htcを呼び出しています。 <tr style='behavior:url(highlight.htc);'> ◆質問◆ ところが、↓のようにすると、 (1) Ａにカーソルを乗せる⇒Ａ、Ｂにハイライト (2) Ｂにカーソルを乗せる⇒Ｂだけにハイライト (3) Ｃにカーソルを乗せる⇒Ｃだけにハイライト となりますが、(1)のケースでもＢだけにハイライトを当てる （＝セルＡにだけは常にハイライトをあてない） ようにするのはどうしたらよいでしょうか。 よろしくお願い致します。 <table> <tr style='behavior:url(highlight.htc);'> <td rowspan="2"></td> <td></td> </tr> <tr style='behavior:url(highlight.htc);'> <td></td> </tr> </table> ┏━┳━┓ ┃ ┃Ｂ┃ ┃Ａ┣━┫ ┃ ┃Ｃ┃ ┗━┻━┛ -----------------------------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> ------------------------------
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<body> <table> <tr style='behavior:url(highlight.htc);'> <td rowspan="2" style="background-color:#FFFFFF">A</td> <td>B</td> </tr> <tr style='behavior:url(highlight.htc);'> <td>C</td> </tr> </table> </body> </html>
関連するQ&A
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- テーブルリンクで別ウインドウで開くようにするには？
<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'と入れてみたんですが、今度はリンクのアクションすらしなくなってしまいました。 よろしくお願いします。
- 締切済み
- HTML
- 列もハイライト
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ハイライト(JavaScript)</title> </head> <body> <script type="text/javascript"> <!-- function hightlight(target, color){ target.style.backgroundColor = color; } //--> </script> <table border="1" style="border-collapse:collapse"> <tr><th>氏名</th><th>日付</th></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒1</td><td>2005/04/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒2</td><td>2004/02/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒3</td><td>2004/10/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒4</td><td>2004/08/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒5</td><td>2005/06/01</td> </table> </body> </html> で行にハイライトを設定しているのですが、同時に列にも同じようにハイライトを設定したいと思っております。 どのように変更したらよいでしょうか？ ご存知の方、宜しくお願いします。
- ベストアンサー
- JavaScript
- テーブルリンクに付いて
下記のテーブルリンクを作成しましたがクリックしても説明文が表示されません どなたか教えて下さい <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>
- ベストアンサー
- その他([技術者向] コンピューター)
- この部分をスタイルシート書きには？
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
- テーブルセルの列での背景色の変更
3行3列のtableで各セルにマウスカーソルをのせた時に そのセルの列すべての背景色を変えるJavaスクリプトを 作成したのですが、うまく動作しません。 どこか間違っているでしょうか。 （たとえば、2-2のセルにマウスカーソルをのせると 1-2、2-2、3-2のセルの背景色をかえるスクリプトです） ●Java function onColor(col) { document.all[col].bgColor = '#00ffff'; } function outColor(col) { document.all[col].bgColor = '#ffffff'; } ●HTML <TABLE BORDER="1" BGCOLOR="#ffffff" cellpadding="0" cellspacing="0"> <colgroup id="a1" span="1" width="25" align="center"> <colgroup id="a2" span="1" width="25" align="center"> <colgroup id="a3" span="1" width="25" align="center"> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">1-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">1-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">1-3</td> </tr> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">2-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">2-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">2-3</td> </tr> <tr align="center"> <td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">3-1</td> <td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">3-2</td> <td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">3-3</td> </tr> </TABLE>
- ベストアンサー
- JavaScript
- 元の色に戻すには？
一行おきに青色を付けているテーブルに対して、マウスカーソルを当てた場合、アクティブな行は赤にしたいのですが、 その後、マウスが離れたら元の色に戻したいのですが、 元の色に戻すにはどうすればいいですか？ --------------------------------------------------------- <style type="text/css"> tr.color_Yes{background-color: blue; } </style> <body> <table border=1 id="Active_row_Color"> <tr class="color_Yes"><td>セル1</td><td>セル2</td></tr> <tr><td>セル3</td><td>セル4</td></tr> <tr class="color_Yes"><td>セル5</td><td>セル6</td></tr> <tr><td>セル7</td><td>セル8</td></tr> <tr class="color_Yes"><td>セル9</td><td>セル10</td></tr> </table> --------------------------------------------------------- これで、1行おきにテーブルの行全体が青になります。 さらに --------------------------------------------------------- <script type="text/javascript"> <!-- firstcolor="White"; nextcolor="red"; function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } } // --> </script> --------------------------------------------------------- と --------------------------------------------------------- <script>table_row("Active_row_Color")</script> --------------------------------------------------------- を追加することで、マウスカーソルをあてた行が赤になるのですが マウスカーソルが離れると白になってしまいます。 それは --------------------------------------------------------- firstcolor="White"; と tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; --------------------------------------------------------- が原因だと思いますが、 では、もともと青色の行の場合は、マウスカーソルが離れた場合、どうやって青に戻せばいいのでしょうか？ 現在の行の背景色を取得して、それをどこか変数に格納し、元に戻すことは可能ですか？ 添付画像は、一番下の行にマウスカーソルをあてた状態です。
- 締切済み
- JavaScript
- Mouseout後画像を戻したい
テーブルに背景画像（background)を使用しています。 その中にあるTDにリンクテキストを入れており、ここにマウスが重なったときに色を変えているのですが、 こんな感じ： <td onMouseover="this.style.backgroundColor='orange'" onMouseout ="this.style.backgroundColor='white'" bgcolor="ffffcc"> <a href="">テキスト</a> </td> Mouseoutした際に、画像差し替えとかTDの色を変えるのではなくて、元のテーブル背景画像が表示されるようにしたいのです。 実現できるようでしたら、回答お願いします…
- ベストアンサー
- Java
- ｈｔｍｌの記述で、カーソルをテーブルに合わせた時に背景色が変わる様にし
ｈｔｍｌの記述で、カーソルをテーブルに合わせた時に背景色が変わる様にしたいので、 <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を使った方法で記述しているのですが、なぜか、ＩＥのActiveXコントロールが働き、ブラウザのページの上に 「セキュリティ保護のため、このコンピュータにアクセスする可能性のあるスクリプトやActiveXコントロールを実行しないよう、InternetExplorerで制限されています。」 というメッセージが出てしまいます。 マウス操作でブロックされているコンテンツの許可をすると、意図したとおりにセルの色が変わるのですが、許可をしないとセルの色は変わりません。 他の方法がないかとＷＥＢ検索をしたのですが、ＷＥＢ上の他のページでonmouseoverを解説しているページを開いてもActiveXコントロールのメッセージは表示さず、解説しているＷＥＢページ内のサンプルのセルの色変化も正常に動作しています。 自分のパソコンの設定が何かおかしいのかと思い、会社のパソコンでも試してみたのですが、自分のパソコン同様ActiveXコントロールが働いてしまいます。 質問が２つあります。 １．ActiveXコントロールが働かないようにするにはどうしたらいいのでしょうか。 ２．ActiveXコントロールを回避できて、onmouseover以外の方法でセルの色を変化させる方法があるのでしょうか。 です。 よろしくお願いします。
- ベストアンサー
- HTML
- このtableタグのサイズ変更の仕方を教えてくださ
<Table border="1" bordercolor="#d4d4d4" cellspacing="0" style="border:thick ridge #d4d4d4;"> <Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー１</a> </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー２</a> </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー３</a> </Td></Tr> <Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー４</a> </Td><Td align="center" bgcolor="#ffff80" valign="middle" width="150" height="150" style="color:7f7f7f;"> WELCOME </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー５</a> </Td></Tr> 書ききれませんでした。 このテーブルをミニサイズで表示したいのですが、width等を使っても小さくなりません。 どうしてですか？ 上手く説明出来ないので、絵を書きました。 下手でごめんなさい。 誰かわかる人いたら教えてください。
- 締切済み
- HTML
お礼
ありがとうございました。 早速試して解決しました。 わたしには絶対出てこない発想でした(^_^;