mouse event toElement, relatedTarget mozilla problem [Archive]

matej

06-02-2006, 02:39 PM

I have a image (bkgImage) with mapped links, an area link calling:

onmouseover="Display('divPop');"
onmouseout="Hide1(event,'divPop');"

Display sets display for divPop to block, that's ok.

Primarily divPop is display:none, and it has an image inside:

<div style="left:150px; top:60px;" id="divPop" class="tip"><img src="img/image.gif" id="divPopImage" OnMouseOut="Hide2(event,'divPop');"></div>

I have this script in the head:

function Hide1(e,element) {
//alert(e.relatedTarget.id);
if ((e.toElement.id || e.relatedTarget.id) != 'divPopImage') {
Hide(element);
}
}

function Hide2(e,element) {
//alert(e.relatedTarget.id);
if ((e.toElement.id || e.relatedTarget.id) == 'bkgImage') {
Hide(element);
}
}

Hide function just sets display back to none, that's ok also.

The original idea was to prevent bubbling (and because the area link and divPop are overlapping, it flickered because of mouseout/mouseover conflict), and also to not hide the divPop if you left the area link and entered divPop....but I complicated it a little.

However, it now works as it should in IE, but not in Mozilla - divPop just stays open, when it should close, like in IE!

If you uncommented the alerts in the functions you would see that the value of id goes thorugh - so mozilla "knows", where the mouse goes to... it just doesn't react afterwards :(

I hope I described the situation clearly enough.

Help?

Thanks!

vwphillips

06-02-2006, 03:16 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">

</script>

</head>

<body onload="zxcInit();" >

<div id="outer0" style="position:absolute;top:100px;left:100px;width:300px;height:300px;background-color:silver;;border:solid black 1px;"

>
<img id="inner0" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="200"
style="position:absolute;top:20px;left:20px;border:solid black 1px;" >
</div>

<div id="outer1" style="position:absolute;top:100px;left:400px;width:300px;height:300px;background-color:silver;;border:solid black 1px;"
>
<img id="inner1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="200"
style="position:absolute;top:20px;left:20px;border:solid black 1px;" >
</div>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
<input size=20 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
</form>
</body>
</html>