• 締切済み

テーブルの外にマウスを出したらイベント・・・(2nd)

すいません。この質問2度目デス。 少し状況が変わり、用は ・tableタグからマウスが出たら、イベント(ページを変える。)を発動。 という事をやりたい訳なんですが、、、いくつか問題が有って、 条件 ・table内にはtr、tdがたくさんあるものとする。 ・(諸事情により、imgで架空的なtableは作りたくない。) ・html+javascriptのみで作成したい。 ・動作環境はIE5.0以上のみでよい。 ・(知らない人の為に書きますが)セル間の所は(space等をすべて0にしても)ど うやらブラウザがtable上と認識しないみたいです。 ・安易な「できません。」という回答はやめて下さい。 凄い複雑なスクリプトになってもいいので(見にくくてもいいので)、よろしくお願いします。出来れば、早めがいいですが、気長に待ちます。

みんなの回答

  • pureh
  • ベストアンサー率69% (36/52)
回答No.5

No3の回答は、忘れて下さい。 補足でおっしゃられていたとおり、<tr><td>に引っかかりますね。 確認のやり方を間違えていたようです。 お騒がせしました。ゴメンナサイ

  • makokoko
  • ベストアンサー率50% (7/14)
回答No.4

purehさんの言う通り、onmouseleaveを使う方法が一番無難でしょうねぇ。

  • pureh
  • ベストアンサー率69% (36/52)
回答No.3

No.2で回答した者です。onmouseleaveを使わなくても、 <DIV onmouseout="...."> <table> ~ </table> </DIV> のように、<DIV>でtable全体を囲ってもできますね。 他のブラウザとの互換性に関しては、全くところ無知ですが、 onmouseleaveは、IE限定か、マイナーみたいですし・・・

nyonta
質問者

補足

回答ありがとうございます。 しかしonmouseoutでうまく起動しないので・・・ もちろん、<DIV onmouseout="...."> も試しましたが、やはり<tr><td>でバグ? が起きてしまいます。 ちゃんと、書かなくてすいません。 onmouseleaveは試してないのでやってみます。 ちなみに、IE限定とは知りませんでした。 ありがとうございます。

  • pureh
  • ベストアンサー率69% (36/52)
回答No.2

#1の方とのやり取りで、問題点が理解できました。 <table>タグで、onmouseleave を使ってみてください。 WINのIE6で、onmouseoutと動作を比較してみました。 たしかに、onmouseoutは、おっしゃっているような反応をしますね。 ただ、セルから出た時に共通の処理をしたい向きには、<table>タグに これ一つおくだけでいいので、これはこれでいいのではないかと思います。

  • Kizz
  • ベストアンサー率47% (30/63)
回答No.1

はじめまして、nyontaさん。 1stは知らないので、これはご存知なのかも?ですが、この質問からはこの答えで充分 かと思うので、一応全く複雑なことはしてませんが、  (条件)   ・tableタグからマウス(フォーカス解除)が出たら・・というイベント取り   ・IE限定でいい ※因みにWindowsのIE5.5で確認 という事で参考までに。 <table>タグに属性として以下を定義  onMouseOut="location.href='URLアドレス';" 参考)フォーカスがついた時用は以下の通り。    フォーカス付き・解除の組み合わせでなんかしたいのであれば・・と一応までに。  onMouseOver="処理" 補足)  ・この onMouseOut,onMouseOverは他のタグでも使えるイベントハンドラです。   ※メジャーは<a>に設定し、画像とかステータスバーへの表示をしたりしますね。  ・<a>はOKですが、<table>タグでのこの属性は、Netscapeでは効きません。   ※MacのIEでいけるかは不明です。 参考までに。 がんばってくださいね。

nyonta
質問者

補足

回答、ありがとうございます。イベントハンドラはもちろん使わないと出来ませんが、 <table>にonmouseout付けるだけでは、<tr>、<td>を乗り越えるときにもイベント が発動してしまうのです。(おそらくバグらしいデス・・・) そこで、何か良い方法が無いのでしょうか。よろしくお願いします。 ちなみに、WinのIEだけで良いです。

関連するQ&A

  • マウスをブラウザの外に出したら、イベント・・・

    マウスをブラウザの外(または<table>の外)に出したら、イベントを発動したい。(alert等) <table onmouseout="javascript:alert('出たよ!')"> とかやると、<table>内の<td>や<tr>から外に出ただけで、イベントが発動してしまいます。 <body onmouseout="javascript:alert('出たよ!')"> これでも同じです。 ブラウザ(または<table>)の外に出た時だけに発動させたいのです。 どうすればよいのでしょうか? ちなみにIEのみの動作で考えてくれれば結構です。 よろしくお願いします。

  • マウスオーバーでテーブル表示

    タイトル通りのことがしたくて、以下のようにしてみたのですが、表示されません。 どこがダメなのか教えてください。 (マウスオーバーで画像表示、はできるようになったんですが。。。) <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> テーブルって名前つけられたんだっけ…?とかいろいろ不安なところはありますが、 よろしくお願いします。

  • 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>

  • マウスカーソルを乗せた時にテーブルの行の色を変える

    マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • CSS
  • テーブルの背景をマウスオーバーで変える

    お世話になります よろしくお願いします 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
  • tableの中にtableを作ると上部によらない

    tableの中に更にtableを作りたいのですが、内側のtableが上のほうに配置されず真ん中に出てしまいます。valign=topを使ったのですがうまくいきません。何か方法はありますでしょうか? <table height=500>   <tr><td> ---------- ここと ------------ <table height=250> <tr><td></td></tr> <tr><td></td></tr> </table> ---------- ここにかなりスペースが出来てしまう(*_*) </tr></td> </table>

  • 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>

  • HTML:Tableタグに対し、JavaScriptで動的にイベントを

    HTML:Tableタグに対し、JavaScriptで動的にイベントを追加しようとしています。 onclick / ondblclickイベントを目的のTableに対しattachEventすると、ダブルクリックの 際に、onclickイベントまで発動してしまいます。 ダブルクリックしたときは、ondblclickのみ実行されるようにするにはどうしたらよいでしょうか。 例) <script type="text/javascript"> function click01() {...} function dblclick01() {...} table01.attachEvent("onclick",click01) table01.attachEvent("ondblclick",dblclick01) </script> (略) <table id="table01"> ...

  • テーブル内の画像をマウスオーバーで拡大したい

    テーブル(CSSで設定)内の画像をマウスオーバーで拡大するにはどうしたら良いでしょうか。javascriptは使用せず、CSSのみで設定したいのです。 今記述は下記の感じです。 【html】 <table border="0"> <tr> <td class="type1" td colspan="2" scope="col" align="center" valign="middle"><a href="#"><img src="●●.jpg" alt="img_alt"/></a></td> </a></td> </tr> </table> 【CSS】 td.type1 { height: 172px; width: 172px; background-color:#FFF; } td.type1 img { border: 1px solid #CCC; padding: 5px; } 足りない情報があればご指摘下さい。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • javascript でテーブル操作

    javascriptのdeleteRowで削除したテーブルの行を再表示する方法を探しております。 下記ソース内reload.gifをクリックするとdeleteRowで消えた行をまとめて表示したいのですが何か良い方法は無いでしょうか? (*)ブラウザの再表示は使えません。 <html> <head> <title></title> <script language="JavaScript" type="text/JavaScript"><!-- function Delline(tablename,num){ document.getElementById (tablename).deleteRow(num); } //--></script> </head> <body> <img src="reload.gif"> <table id="table1"> <tr onmouseover="asrow1 = this.rowIndex"> <td class="ChkTD41">ああ<img src="del.gif" onclick="Delline('table1',asrow1)" /> <input type="text" name="a1"> </td> </tr> <tr onmouseover="asrow2 = this.rowIndex"> <td class="ChkTD41">いい<img src="del.gif" onclick="Delline('table1',asrow2)" /> <input type="text" name="b1"> </td> </tr> <tr onmouseover="asrow3 = this.rowIndex"> <td>うう<img src="del.gif" onclick="Delline('table1',asrow3)" /> <input type="text" name="c1"> </td> </tr> </table> </body> </html>

専門家に質問してみよう