tableについて

質問

いつもお世話になっております。

今回はテーブルについてお聞きします。

現在、テーブルからマウスが出て行った際にある処理をしたいと思っています。
そこで以下のようにしてみたところ
<table onmouseout="function()">
各セルを移動するごとにこの関数が動いてしまったので、
<div onmouseout="function()">
<table>
...
</table>
</div>
とやってみましたが結果は同様でした。

テーブルを一つの空間として、そこからマウスが出たらfunctionを予備隊のですがこの場合はどのようにすれば実現できるのでしょうか？
ご教授願います。

回答No.1

leap_day · ベストアンサー

こんにちは

2つあります

【A】onmouseoverでfunctionを設定しておく（table内でのonmouseoverは使用できなくなります)

<style type="text/css"><!--
table {
width:300px;
height:500px;
background-color:lavender;
}
--></style>
<script type="text/javascript"><!--
function r() {
document.getElementById("test").innerHTML = "test";
}
function r0() {
document.getElementById("test").innerHTML = "test false";
}
//--></script>

<div id="test"></div>
<table onmouseover="r0()" onmouseout="r()">
<tr>
<td>a</td><td>b</td>
</tr><tr>
<td>c</td><td>d</td>
</tr>
</table>

【B】（そのtableが表示のみであれば）透過gifなどをtable上にかぶせてそちらにonmuseoutを設定する(table内の作業(function 呼び出しやリンクなど)まったくできなくなります）

<style type="text/css"><!--
table {
width:300px;
height:500px;
background-color:lavender;
}
#base {
position:relative;
}
#base img {
position:absolute;
top:0px;
left:0px;
width:300px;
height:500px;
}
--></style>
<script type="text/javascript"><!--
function r() {
document.getElementById("test").innerHTML = "test";
}
//--></script>
<div id="test"></div>
<div id="base">
<table>
<tr>
<td>a</td><td>b</td>
</tr><tr>
<td>c</td><td>d</td>
</tr>
</table>
<img src="visible.gif" onmouseout="r()">
</div>