- ベストアンサー
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初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- tantamu
- お礼率84% (11/13)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<style> td.over{ background-Color:#ffffcc; } td{ background-Color:#68ceff; } </style> <script> window.onload=function(){ var tags=document.getElementsByTagName("td"); for(var i=0;i<tags.length;i++){ tags[i].onmouseover=function(){ this.className="over"; } tags[i].onmouseout=function(){ this.className=""; } } } </script> <table> <tr> <tr> <td>リンク</td> </tr> <tr> <td>リンク</td> </tr> </table> 表示部分についてはclassをつかって設定すると、複数の設定をしたりする 面倒がはぶけます
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
jQueryライブラリを使った方法を。 jquery.jsの入手 http://jquery.com/ 参考 http://semooh.jp/jquery/ <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('TD.over').hover( function(){//mouseoover $(this).css('background-color','#ffffcc'); },function(){//mouseout $(this).css('background-color','#68ceff'); }); }); </script> idはページ内でユニークでなければいけませんので <td id="over"> → <td class="over"> としてください。 なお、このhover効果がそれほど重要でなければcssだけで十分だと思います。 <style type="text/css"> td.over{ background:#68ceff; } td.over:hover{ background:#ccccff; } </style> IE6では動作しませんがIE7以降および他のメジャーブラウザはこれで動作します。
お礼
早速の回答有り難うございました。 色々な方法があるのですね。jQueryライブラリは知らなかったので参考になりました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <table border="1"> <tr> <td>01</td><td class="over">02</td><td class="over">03</td><td>04</td> </tr> <tr> <td class="over">11</td><td>12</td><td>13</td><td class="over">14</td> </tr> </table> <script type="text/javascript"> //@cc_on //全角空白は半角かタブに置き換えの事 (function(){ var m = null; var c = 'over'; var r = new RegExp('\\b'+c+'\\b'); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', function (evt){ var element = evt./*@if(1) srcElement @else@*/target /*@end@*/; if (m) m.style.backgroundColor = '#68ceff'; if (element.tagName == 'TD' && element.className && element.className.match(r)) { element.style.backgroundColor = '#ffc'; m = element; } else { m = null; } }, false); })(); </script>
お礼
早速の回答有り難うございました。 class分けも参考になります。 javascriptをじっくり勉強したいと思います。有り難うございました。
関連するQ&A
- テーブルでのハイライト表示について教えて下さい
皆さんこんばんわ。 いつも利用させてもらっています。 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
- テーブルリンクで別ウインドウで開くようにするには？
<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
- Mouseout後画像を戻したい
テーブルに背景画像（background)を使用しています。 その中にあるTDにリンクテキストを入れており、ここにマウスが重なったときに色を変えているのですが、 こんな感じ： <td onMouseover="this.style.backgroundColor='orange'" onMouseout ="this.style.backgroundColor='white'" bgcolor="ffffcc"> <a href="">テキスト</a> </td> Mouseoutした際に、画像差し替えとかTDの色を変えるのではなくて、元のテーブル背景画像が表示されるようにしたいのです。 実現できるようでしたら、回答お願いします…
- ベストアンサー
- Java
- テーブルリンクに付いて
下記のテーブルリンクを作成しましたがクリックしても説明文が表示されません どなたか教えて下さい <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
- 列もハイライト
<!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
- 画像にオンマウスで背景画像を固定
画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか？ 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。
- ベストアンサー
- HTML
- 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
- <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
- この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
補足
早速の回答有り難うございました。 もしお時間があれば「表示部分についてはclassをつかって設定すると、複数の設定をしたりする面倒がはぶけます」の見本を見せてもれえると助かります。 最終的には複数の色分けをしたかったんです☆