onMouseOver and onMouseOut problem in Cell <TD> containing Writing

[christian9997]

Hi

I was trying to create a page where a SubMenu would appear when the
user moved the mouse over an item of a Menu (= Table Cell <TD>).
Unfortunately there seems to be a problem; the onMouseOver event is
fired as soon as the mouse enters the cell but then the onMouseOut
event is fired when it is moved over the writing inside the cell. The
browsers seem to consider that the writing is not part of the cell.

After a lot of waisted time I realised that Microsoft has a way of
solving this problem by using onMouseEnter and onMouseLeave (instead
of onMouseOver and onMouseOut) but this doesn't work for either
Netscape or Opera (as I suppose it's JScript).

Are there any Javascript event handlers that do the same trick as
onMouseEnter and onMouseLeave? If not I suppose this is a bug, has
anyone found a clean way to fix this?

I suppose a way to fix this would be to replace the table with an
image and do the event handling on the image instead of on the table
cell. But I really would rather not use images.

Here is the code in case my explanation was not clear enough.

<TR>
<!--<TD ALIGN="center" onMouseOver="di splaySubMenu('r ealEstate',1);"
onMouseOut="clo seSM = 1;setTimeout('c loseSubMenu()', 500);">-->
// THE onMouseOver AND onMouseOut EVENTS ARE FIRED TOO OFTEN EACH
TIME THE MOUSE ENTERS OR EXITS THE CELL BUT ALSO WHEN IT PASSES OVER
THE H2 FONT

<TD ALIGN="center" onMouseOver="di splaySubMenu('r ealEstate',1);"
onMouseLeave="c loseSM = 1;setTimeout('c loseSubMenu()', 500);">
// THIS CODE WORKS BUT ONLY IN INTERNET EXPLORER (I used IE6)

<H2 CLASS="red">Cal l</H2><H2 CLASS="yellow"> SubMenu</H2>
<H2 CLASS="blue"> >></H2>
</TD>
</TR>

Thanks in advance to anyone who can help.

[christian9997]

I seem to have answered my own question. The problem I had was that I
thought that there was a sort of border zone between the cell and the
font where the cell's onMouseOut event had fired but the font
onMouseOver had not yet fired but that is not the case. It's either in
one or the other of the two items <TD> or <DIV>. So in fact it's quite
easy to fix. You just need to create a control variable
"stillInMenuCel l":

<SCRIPT LANGUAGE="Javas cript">

function closeSubMenu() {
if (!stillInMenuCe ll)
subMenuLayerNam e.style.visibil ity = 'hidden';
}

</SCRIPT>
<TD ALIGN="center" onMouseOver="st illInMenuCell = 1;
displaySubMenu( 'realEstate',1) ;"
onMouseOut="sti llInMenuCell = 0; closeSubMenu(); ">
<DIV ID="realEstateC ell" onMouseOver="st illInMenuCell = 1;">
<H2 CLASS="red">Rea lEstate</H2><H2 CLASS="yellow"> Ads</H2>
<H2 CLASS="blue"> >></H2>
</DIV>
</TD>

I really have the impression that this is a bug. From reading the
recommendations for onMouseOut I really had the impression it should
only be fired if the Mouse actually left the Cell area. Anyway I
managed to find a fix for it so never mind.