- ベストアンサー
マウス位置取得方法
いつもお世話になっております。 現在tableの各セルにonmouseoverを入れて、マウスの動きに追従してセルの色が変わるものを作っています。 その際、マウスを高速で動かすとマウスに色の変化が付いてこない状態になってしまいます。 原因は td.style.backgroundColor="#FFOOFF" という処理は行われているのですが、マウスを動かし続けるとonmouseoverが呼ばれ続けて、styleの表示の反映が遅れているようです。 そこで解決する方法を考えて調査したのですが方法がわからなかったのでお聞きします。 方法）onmouseoverが呼ばれたセルと現在マウスがあるセルを比較して違うものであった場合、関数を終了する。 この方法は、マウスが連続して動いているときは関数を処理しないでおく方法ですが、関数を呼ばれた後にマウスが動いたことを察知する方法がわかりません。 javascriptはマルチスレッドができないので、関数のそのステップ現在でのマウスの位置を知る方法がありましたらご教授願います。 現在のコードは以下のようなものです。 <script> function hoge() { //通過したセルの色を変える } </script> <table> <TR> <TD onmouseover="hoge();"></TD> ..... <TD onmouseover="hoge();"></TD> </TR> </TABLE> このようなtableのセルが300ほどあります。 以上、何かできることがありましたら、ちょっとしたことでも情報をいただきたいです。 よろしくお願いします。
- iec1128
- お礼率43% (70/161)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <table border="1"><tr><td>a</td><td>b</td><td>d</td><td>e</td><td>f</td><td>g</td></tr></table> <script> var mae; document.body.onmouseover = function(e){ var obj = /*@cc_on @if(1) event.srcElement @else@*/ e.target /*@end@*/; if(obj.tagName!='TD') return; if(mae)mae.style.backgroundColor='';mae=obj; mae.style.backgroundColor='#f00'; } </script>
関連するQ&A
- 元の色に戻すには？
一行おきに青色を付けているテーブルに対して、マウスカーソルを当てた場合、アクティブな行は赤にしたいのですが、 その後、マウスが離れたら元の色に戻したいのですが、 元の色に戻すにはどうすればいいですか？ --------------------------------------------------------- <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
- 異なるセルに触れる度、テーブル背景画像もそれぞれ変化させる方法
オンマウスで異なるセルなどの背景を変える方法 http://okwave.jp/qa4890043.html で質問した者です。 その質問で教えて頂いたやり方(※1)を応用して、 異なるセルに触れる度に、テーブル自体の背景もそれぞれ異なる画像に変化させる方法を教えて下さい。 マウスオーバーで変化、マウスアウトで元の背景に戻る、というかたちでお願いします。 ＊ ＊ ＊ テーブルにaaa.jpgという背景が設定されているとして、 <table><tr> <td>1111</td> ←このセルに触れるとテーブル背景がbbb.jpgに変化。 <td>2222</td> ←このセルに触れるとテーブル背景がccc.jpgに変化。 </tr></table> どのセルでもマウスアウトで元のaaa.jpgに戻る。 (※1) <script> function change(obj){ var p=obj.parentNode; while(p){ if(p.nodeName=="TABLE") break; p=p.parentNode; } p.style.backgroundImage="url(****.jpg)"; } </script> <table> <tbody> <tr> <td onMouseover="change(this)">1111</td> <td>2222</td> <td>3333</td> </tr> </tbody> </table> 私からのレスは明日以降になってしまいますが、宜しくお願いします。
- ベストアンサー
- HTML
- tableにまとめて関数
いつもお世話になっております。 今回はtableについてお聞きしたいです。 現在tableの各セルに同じ関数を適用するために以下のようにしています。 <table> <TR> <TD onclick="hoge();"></TD> <TD onclick="hoge();"></TD> ... <TD onclick="hoge();"></TD> </TR> </table> これを一つのtableすべてのTDについて行っているのですがファイルサイズを削りたいということになったので何とかまとめたいと思ったのですがうまい方法がわかりませんでした。 もし方法があるのでしたらご教授をお願いします。
- 締切済み
- JavaScript
- 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
- マウスオーバーでテーブル表示
タイトル通りのことがしたくて、以下のようにしてみたのですが、表示されません。 どこがダメなのか教えてください。 （マウスオーバーで画像表示、はできるようになったんですが。。。） <script language="JavaScript"> function table(object,hyoji){ document.[object].style.visibility=hyoji } </script> <img src="onMouseOver('TABLE1','visible');"> <SPAN STYLE="POSITION:ABSOLUTE; TOP:30; LEFT:40; filter: Alpha(opacity=60); visibility='hidden';"> <TABLE CLASS="SETSUMEI" NAME="TABLE1"> <TR><TD CLASS="SETSUMEI">TOPページに<BR>戻ります。</TD></TR></TABLE></SPAN> テーブルって名前つけられたんだっけ…？とかいろいろ不安なところはありますが、 よろしくお願いします。
- ベストアンサー
- JavaScript
- テーブルの背景をマウスオーバーで変える
お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします
- ベストアンサー
- HTML
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- テーブルの背景色を複数変更する
テーブルにて、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
- Dreamweaverでテーブルセルの選択方法
Dreamweaver MX 2004を使用しています。 テーブルのセルをドラッグですべて選択し、 「プロパティ」でスタイルを選択したのですが、 スタイルがセルに設定されるのではなく（A）、 セルの”行”に設定されてしまいました（B）。 どうすれば、セルごとにスタイルを設定（A）することができるのでしょうか？ よろしくお願いします （A） <table> <tr> <td class="f1"></td> <td class="f1"></td> </tr> </table> （B） <table> <tr class="f1"> <td></td> <td></td> </tr> </table>
- ベストアンサー
- ホームページ作成ソフト
- tdタグに何も入れなくとも幅を均一にする方法
<table border = "1"> <tr> <th>hoge</th> <td></td> </tr> </table> 上記のような場合、<td>タグ内には何も書かれてないので セルがつぶされた形で表示されますよね？ これを<th>タグ内のhogeと同じセルの幅で表示するにはどうすればいいですか？ style属性にwidth:100pxとかしてみたのですが無駄でした‥
- ベストアンサー
- HTML
お礼
ご回答ありがとうございました。 上記を参考に実現できました。