- ベストアンサー
マウスをブラウザの外に出したら、イベント・・・
makokokoの回答
以下のソースをテストしてみてください。こちらではテスト済みです。 細かいことを言うと、ブラウザの外ではなく、描画領域の外に出た時点で アラートが表示されちゃいますが。 <HTML> <BODY ID="PARENTS"> <TABLE> <TR> <TD>テスト</TD> </TR> </TABLE> </BODY> <SCRIPT FOR="PARENTS" EVENT="onmouseout"> if(event.x == -1) alert('Out'); </SCRIPT> </HTML>
関連するQ&A
- テーブルの外にマウスを出したらイベント・・・(2nd)
すいません。この質問２度目デス。 少し状況が変わり、用は ・tableタグからマウスが出たら、イベント(ページを変える。)を発動。 という事をやりたい訳なんですが、、、いくつか問題が有って、 条件 ・table内にはtr、tdがたくさんあるものとする。 ・（諸事情により、imgで架空的なtableは作りたくない。） ・html＋javascriptのみで作成したい。 ・動作環境はIE5.0以上のみでよい。 ・（知らない人の為に書きますが）セル間の所は（space等をすべて0にしても）ど うやらブラウザがtable上と認識しないみたいです。 ・安易な「できません。」という回答はやめて下さい。 凄い複雑なスクリプトになってもいいので(見にくくてもいいので)、よろしくお願いします。出来れば、早めがいいですが、気長に待ちます。
- 締切済み
- JavaScript
- jqueryでテーブル行のマウスアウト時の動作
jqueryでテーブル行をマウスオーバー、マウスアウトした時に行の背景色が 変更されることを期待して下記のようなサンプルを作成してみました。 マウスアウトした時に背景色が変わるようにサンプルを書いて見ましたが 変わりませんでした。どこが悪いかお分かりになりますでしょうか。 また、下記サンプルでマウスアウトした時に色が変わった行の行番号、及び行のオブジェクトを 取得するにはどう記述すればよろしいでしょうか。 <html> <head> <meta charset="UTF-8" /> <title>属性フィルター</title> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { alert("a"); $("table tr").mousout( function() { alert("c"); $(this).css("background-color", "red"); } ); }); </script> </head> <body> <table border="1"> <tr> <td>aiueo</td> </tr> <tr> <td>kakikukeko</td> </tr> <tr> <td>sasisuseso</td> </tr> <tr> <td>tatituteto</td> </tr> </table> </body> </html>
- ベストアンサー
- 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
- Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript"> <!-- document.onmousedown = msDown //----------------------------------------------------------------------------- // マウスで座標を取得する //----------------------------------------------------------------------------- function msDown(){ var x = event.x; var y = event.y; alert('x=[' + x + '] y=[' + y + ']'); } // --> </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。 正しく取得する方法はありますか？ <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい（マウスイベントで調べられるが、それを使わずに調べたい） </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- 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
- javascriptで指定するtrを削除した時に、IEとfirefoxで動作が異なる
はじめて、投稿いたします。 現在、javascriptで指定した行を削除するような動作を作っているのですが、firefoxとIEで動作が異なってしまうため困っています。 ちなみに、firefoxでは、実現してほしい動作をしてくれるのですが、IEではうまく動作してくれません。 tableのtrが3つ以上ある場合は、指定した行が正常に削除します。 しかし、IEだと、trが２つの時には、1番目のtrを削除しようとすると、一緒に2番目のtrの中身が見えなくなってしまいます。 ちなみに、その中の情報が削除されたのかなと思い、alertで表示させるとどうやら削除はされておらず、表示しなくなってしまうようです。 どうすれば、firefoxとIEで、同じような動作をするようにできるのでしょうか？ よろしくお願いします。 以下に、ソースを貼っておきます。 <html> <head> <script type="text/javascript"> <!-- function delete_tr(html_this) { var TR = html_this.parentNode.parentNode; TR.parentNode.deleteRow(TR.sectionRowIndex); var table = document.getElementById('test_table'); var tr_num; var td_num; for (tr_num = 0; tr_num < table.rows.length; tr_num++) { for (td_num = 0; td_num < table.rows[tr_num].cells.length; td_num++) { alert(table.rows[tr_num].cells[td_num].innerHTML); } } } --> </script> </head> <body> <h1>Hello World !!</h1> <table border="1" id="test_table"> <tr> <td> <input type="button" value="delete" onClick="delete_tr(this)" /> </td> <td style="display: none;">------ bbbb ------</td> <td>------ cccc ------</td> </tr> <tr> <td> <input type="button" value="delete" onClick="delete_tr(this)" /> </td> <td style="display: none;">------ BBBB ------</td> <td>------ CCCC ------</td> </tr> <tr align="center"> <td colspan="3"> <input type="button" value="add"> </td> </tr> </table> </body> </html>
- ベストアンサー
- 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
- テーブルセルの列での背景色の変更
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
- <TABLE><TD><TR>～内のアンカー
以下のように<TABLE><TD><TR>内にアンカーを置いたとき、IE９までは問題なく動作したのですが、IE１０では動作せず、アンカーが引っかからないかように一番上から表示されます。 何か対応策はないでしょうか？ <html> ～ <body> <table> <tr> <td> <a href="aaa"></a> あいうえお </td> </tr> <tr> <a href="bbb"></a> <td> かきくけこ </td> </tr> </table> </body> </html> ---------------------------------------------- http://thispage.html#aaa http://thispage.html#bbb IE9まででは、各行で頭出しされるが、IE10では、先頭から表示される。
- 締切済み
- HTML
- イベントバブル、マウスオーバーなどに関して
http://okwave.jp/qa/q6681276.html に関連しますが divの中に、p、ulが同列にあり div領域からmouseoutしたらイベントが起きるようにしたいと思っています。 イベントは親要素に伝播するということなので event.cancelBubble = true; window.event.cancelBubble=true; をp,ulのイベントに入れました。 又、各要素のマウス状態の履歴をテーブルに残してみました（下にソース）。 （マウスアウトしたら「x」、オーバーで「o」） その結果、 バブリング防止策を講じたため pまたはulのマウスアウトはdivに伝わっていません(ただしFirefoxではダメ？)。 ところがよく見ると div→p div→ul と移動する際、div内ではありますが divは一旦マウスアウトしてから再びマウスオーバーとなっているようです。 まず、ここまでの理解は間違っていないでしょうか？ そして、境界線をまたぐ際、マウスアウトになるのはどうにもならないのでしょうか？ 基本的な質問で申し訳ありませんが、よろしくお願いします。 --------------------------------------------------------------------------------------------- <script style="text/javascript"> function divOn() { document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'o'; } function divOff() { document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'x'; } function pOn() { document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'o'; } function pOff() { document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'x'; } function ulOn() { document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'o'; } function ulOff() { document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'x'; } function stopBubbling() { event.cancelBubble=true; stopPropagation=true; } </script> <div onMouseover="divOn();" onMouseout="divOff();" style="background:#fee;padding:1em;height:300px;">div <p onMouseover="pOn();" onMouseout="stopBubbling();pOff();" style="background:#efe;height:100px;">p</p> <ul onMouseover="ulOn();" onMouseout="stopBubbling();ulOff();" style=";background:#eef;height:100px;"> <li><a>li</a></li> <li><a>li</a></li> </ul> </div> <table border="1"> <thead> <tr> <th>div</th> <th>p</th> <th>ul</th> </tr> </thead> <tbody> <tr> <td id="atDiv"><br /></td> <td id="atP"><br/></td> <td id="atUl"><br/></td> </tr> </tbody> </table>
- ベストアンサー
- JavaScript
お礼
有り難うございます。 問題なく動作いたします。 if(event.x == -1) なんて書き方知りませんでした。 やはり、単語不足ですね。。 勉強になりました。