吉見です。

たびたびすみません。また質問です。
今回はイベントについてです。

テーブルの背景をマウスのあるところだけ変更するプログラムを作りました。
要は、a:hoverと同様のことをテーブル要素にしたいのです。ここでは、横長
のテーブルでポイントしている位置をわかりやすくするために、mouseOver と
mouseOutで関数を呼んで背景を書き換えています。

一応、クロスブラウザなプログラムにしているつもりです。
IE と O7 ではうまく動いたのですが、NN7 では、何かの拍子にmouseoutの状
態の色が別の行のものになったり、行のうち一部のセルの背景のみが変わって
しまったりします。

いろいろと実験したところ、マウスをCat->Dogに動かすと、確実にDogの背景
色だけが薄緑色になったままになります。その後は右側のセルと左側のセルは
マウスに対して別々の色変化をするようになります。
もしかして、何かの拍子にセル構造が壊れてしまったりするのでしょうか？
これを防ぐ方法はあるのでしょうか？

><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>テーブルホバー5D</TITLE>
><script language="JavaScript1.2">
><!--
>function init()
>{
>  if(document.getElementById){
>    turnoff_all(document.getElementById('tab0'));
>    turnoff_all(document.getElementById('tab1'));
>   }else{
>    turnoff_all(document['tab0']);
>    turnoff_all(document['tab1']);
>  }
>}
>
>
>function turnon(_event)
>{
>if(!_event){
>  _event = window.event;
>}
>  if(_event.srcElement){
>  _event.srcElement.parentElement.bgColor="#ffff80";
>  }else{
>  _event.target.parentNode.bgColor="#ffff80";
>  }
>}
>
>function turnoff(_event)
>{
>if(!_event){
>  _event = window.event;
>}
>  if(_event.srcElement){
>    row = _event.srcElement.parentElement;
>  }else{
>    row = _event.target.parentNode;
>  }
>  if(row.rowIndex % 2){
>    row.bgColor = '#d0d0ff';
>  }else{
>    row.bgColor = '#c0ffc0';
>  }
>}
>
>function turnoff_all(tab)
>{
>  i = 0;
>  while(tab.rows[i]){
>    if(i % 2){
>      tab.rows[i].bgColor = '#d0d0ff';
>    }else{
>      tab.rows[i].bgColor = '#c0ffc0';
>    }
>    i++;
>  }
>}
>
>//-->
></script>
></HEAD>
><BODY onload="init()">
>
><p>
><table id="tab0" border=0 cellspacing=0 width=100%>
><tr onMouseOver="turnon(event)" onMouseOut="turnoff(event)">
><td width=50%>Ant</td><td>Bat</td>
></tr>
><tr onMouseOver="turnon(event)" onMouseOut="turnoff(event)">
><td width=50%>Cat</td><td>Dog</td>
></tr>
><tr onMouseOver="turnon(event)" onMouseOut="turnoff(event)">
><td width=50%>Elephant</td><td width=50%>Fly</td>
></tr>
></table>
><br>
><br>
><table id = "tab1">
><tr onMouseOver="turnon(event)" onMouseOut="turnoff(event)">
><td width=50%>Elephant</td><td width=50%>Fly</td>
></tr>
><tr onMouseOver="turnon(event)" onMouseOut="turnoff(event)">
><td width=50%>Goat</td><td>Hip</td>
></tr>
></table>
><br><br><br>
>
>
><p>
><p>
></div>
><br><br>
>
></BODY>
></HTML>

-- 
Takashi YOSHIMI mailto:tak-yoshimi@rio.odn.ne.jp