- 締切済み
セルにマウスが
下記はセルにマウスが通過と離れた時に背景色を変えるPerlのコードです、通過したとき透明にしたいのですが、よろしくお願いします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var evobj; function over(bg){ evobj=event.srcElement; if(evobj.tagName=="TR"||evobj.tagName=="TABLE"){ return } while(evobj.tagName!="TD"){ evobj=evobj.parentElement; } evobj.style.backgroundColor=bg; } function out(bg){ evobj.style.backgroundColor = bg; } //--> </SCRIPT> @bgcolor = qw(NAVY BLUE WHITE PINK); $bcolor = $bgcolor[int(rand($#bgcolor + 1))]; print "<TR onMouseOver=\"over(\'red\')\" onMouseOut=\"out(\'$bcolor\')\">
- hana3090
- お礼率29% (65/222)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- chamiguri
- ベストアンサー率17% (3/17)
htmlですが、サンプルにどうぞ！ Perlは分からないのでごめんなさい。 <body onload="f()"> <script> function f(){ var table = document.getElementById("testTable"); var rows = table.getElementsByTagName("td"); for (i=0; i < rows.length; i++) { rows[i].onmouseover = function() { this.style.background='aqua';this.style.cursor='hand'; }; rows[i].onmouseout = function() { this.style.background='' }; } } //--> </script> <table id="testTable" width="400" border="1"> <tr> <td><br/></td> <td><br/></td> <td><br/></td> <td><br/></td> </tr> </table> </body>
関連する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
- 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> ------------------------------
- ベストアンサー
- JavaScript
- この部分をスタイルシート書きには？
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>をリンクボタンにした時、マウスオーバーでポインタの形が変わるようにするには？
宜しくお願い致します。当方htmlで簡単なHPがやっと作成出来るレベルです。 テーブル<table>のセル内をボタンにし、それ（下記の例では「新着情報」）が押されたら、分割されたフレームの「frame1」にaaaaa.htmlを開かせるのですが、下記の記述で最初の状態、マウスオーバー、マウスアウト、リンクは上手く行くのですが、マウスオーバー時にポインタの形を矢印(cursorの設定値でいう「pointer」)にしたいのですが、どなたかお分かりになる方がいらっしゃいましたら、お教え下さい。 尚、初心者ですので、下記の記述は文法上間違えていると思います。 宜しくお願い致します。 <tr> <a href="aaaaa.html" Target="frame1"> <td height="20" bgcolor="blue" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='blue'"><font color="darkblue" size="2">新着情報</font></td></tr>
- ベストアンサー
- HTML
- テーブルでのハイライト表示について教えて下さい
皆さんこんばんわ。 いつも利用させてもらっています。 HTMLとJAVA SCRIPTの初心者です。 テーブルでのonmauseoverになっている時のハイライトにする 方法を教えて下さいTT trをハイライトにするという内容の質問はありましたが、 今回は途中で背景色が変わるため、 どうしても作ることができませんでした。 一つ一つIDをふり、onmouseoverでの処理をさせてみましたが、 FirefoxではDOCTYPEの違いからか、エラーが出て表示することが できませんでした。 項目的には残り１００項目ほどありますので、どなたかお教え いただけませんでしょうかTT よろしくお願いします。 以下、ソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript"> function TDBC0() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD2.style.background='#FFFFCC'; TD3.style.background='#FFFFCC'; TD4.style.background='#FFFFCC'; TD5.style.background='#FFFFCC'; TD6.style.background='#FFFFCC'; TD7.style.background='#FFFFCC'; } function TDBC0C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD2.style.background='#f1f1e0'; TD3.style.background='#ffffff'; TD4.style.background='#ffffff'; TD5.style.background='#f1f1e0'; TD6.style.background='#fafaf5'; TD7.style.background='#fafaf5'; } //身体測定 体重 function TDBC1() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD2.style.background='#FFFFCC'; TD3.style.background='#FFFFCC'; TD4.style.background='#FFFFCC'; } function TDBC1C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD2.style.background='#f1f1e0'; TD3.style.background='#ffffff'; TD4.style.background='#ffffff'; } //身体測定 体重 function TDBC2() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD5.style.background='#FFFFCC'; TD6.style.background='#FFFFCC'; TD7.style.background='#FFFFCC'; } function TDBC2C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD5.style.background='#f1f1e0'; TD6.style.background='#fafaf5'; TD7.style.background='#fafaf5'; } </script> <head> <body> <table border="1" cellpadding="0" cellspacing="0" class="tbl004"> <tr> <th rowspan="2" bgcolor="#C4E5FA" class="bg1">分 類</th> <th rowspan="2" bgcolor="#C4E5FA" class="bg1">種類</th> <th colspan="2" bgcolor="#C4E5FA" class="bg1">在庫数</th> </tr> <tr> <th bgcolor="#C4E5FA" class="bg1">下 限</th> <th bgcolor="#C4E5FA" class="bg1">上 限</th> </tr> <tr> <th rowspan="2" bgcolor="#f1f1e0" class="tdBgcolor02" id="TD1" onmouseover="TDBC0()" onmouseout="TDBC0C()">書籍</th> <td bgcolor="#f1f1e0" class="tdBgcolor02" id="TD2" onmouseover="TDBC1()" onmouseout="TDBC1C()">単行本</td> <td bgcolor="#ffffff" id="TD3" onmouseover="TDBC1()" onmouseout="TDBC1C()">50</td> <td bgcolor="#ffffff" id="TD4" onmouseover="TDBC1()" onmouseout="TDBC1C()">270</td> </tr> <tr> <td bgcolor="#f1f1e0" id="TD5" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor02">文庫本</td> <td bgcolor="#cccccc" id="TD6" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor03">10</td> <td bgcolor="#cccccc" id="TD7" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor03">300</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- 砂時計について教えてください。
下のように記述すると、NN、Firefoxの最新版では特に何もないのですが、IEの最新版ではマウスカーソルを動かすたびに砂時計がチカチカと出る理由を教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/JavaScript"> <!-- function over(){document.getElementById("menu0").style.display="block";} function over2(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } document.getElementById("menu"+n).style.display="block"; document.getElementById("menu"+n).style.top=(n*20)-20+"px"; } function out(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } } //--> </script> <table cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <div id="menu0" style="display:none;"> <div onmouseover="over2(1)"><a href="url01.html">link01</a></div> </div> </td> <td valign="top"> <div id="menu1" style="display:none;" onmouseover="over2(1)" onmouseout="out(1)"> <div><a href="url11.html">link11</a></div> </div> <div id="menu2" style="display:none;" onmouseover="over2(2)" onmouseout="out(2)"> <div><a href="url21.html">link21</a></div> </div> <div id="menu3" style="display:none;" onmouseover="over2(3)" onmouseout="out(3)"> <div><a href="url31.html">link31</a></div> </div> </td> </tr> </table>
- ベストアンサー
- 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>
- ベストアンサー
- その他([技術者向] コンピューター)
- 条件にあったテーブルのセルを数える
テーブルを作り、それぞれのセルをonmouseoverすると背景が変わるようになっています。そして、背景が変わった後に、何個のセルの背景が変わったのかを知りたいのですが、どうもうまくいきません。alertで確認してもいつも「０」として出てきます。お手数ですが、ご指導お願いします。 <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>
- 締切済み
- JavaScript
- テーブルの背景色を複数変更する
テーブルにて、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
- マウスアウトでサブウィンドウを閉じる
ホットスポットのマウスオーバーでサブウィンドウを開き、マウスアウトでそのウィンドウを閉じたいのですが、マウスアウト時にエラーになります。 ホットスポットには <area shape="rect" onMouseOver="javascript: openWindow2()" onMouseOut="javascript: closeWindow2()">のように記述し、JAVASCRIPTは以下のように記述しています。 <script language="javascript"> function openWindow2() { window.open("date.htm","window5","WIDTH=475,HEIGHT=430"); } function closeWindow2() { window5.close(); } </script> どこを直せば正常に動くようになるでしょうか。
- ベストアンサー
- JavaScript
