469,917 Members | 1,784 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,917 developers. It's quick & easy.

onMouseOver and onMouseOut problem in Cell <TD> containing Writing

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="displaySubMenu('realEstate',1);"
onMouseOut="closeSM = 1;setTimeout('closeSubMenu()',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="displaySubMenu('realEstate',1);"
onMouseLeave="closeSM = 1;setTimeout('closeSubMenu()',500);">
// THIS CODE WORKS BUT ONLY IN INTERNET EXPLORER (I used IE6)

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

Thanks in advance to anyone who can help.
Jul 20 '05 #1
1 8152
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
"stillInMenuCell":

<SCRIPT LANGUAGE="Javascript">

function closeSubMenu() {
if (!stillInMenuCell)
subMenuLayerName.style.visibility = 'hidden';
}

</SCRIPT>
<TD ALIGN="center" onMouseOver="stillInMenuCell = 1;
displaySubMenu('realEstate',1);"
onMouseOut="stillInMenuCell = 0; closeSubMenu();">
<DIV ID="realEstateCell" onMouseOver="stillInMenuCell = 1;">
<H2 CLASS="red">RealEstate</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.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by bissatch | last post: by
5 posts views Thread by Derek Fountain | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.