Ryh wrote:
I have the following scritpt. It hides div layer when mouse is out of
the div layer. Inside DIV I have IFRAME box. Unfortuantely it does not
work in Mozilla or IE 5.5. It hides div when cursor is inside IFRAME.
NOte that IFRAME is inside DIV so it should not hide DIV. It Works
fine in IE6.0.
You need to check whether the toElement/relatedTarget is contained
inside of the div element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>event handling to hide an element when the mouse leaves it</title>
<script type="text/javascript">
function mouseLeaves (element, evt) {
if (typeof evt.toElement != 'undefined' && typeof element.contains !=
'undefined') {
return !element.contains(evt.toElement);
}
else if (typeof evt.relatedTarget != 'undefined' && evt.relatedTarget) {
return !contains(element, evt.relatedTarget);
}
}
function contains (container, containee) {
while (containee) {
if (container == containee) {
return true;
}
containee = containee.parentNode;
}
return false;
}
</script>
<script type="text/javascript">
function hideElement (element) {
if (element.style) {
element.style.visibility = 'hidden';
}
}
function showElement (element) {
if (element.style) {
element.style.visibility = 'visible';
}
}
</script>
<style type="text/css">
#div1 {
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div1"
onmouseout="if (mouseLeaves(this, event)) {
hideElement(this);
}">
<p>This is a div element which contains child nodes like a paragraph and
an iframe.
When the mouse leaves the element completely it should be hidden but
when the mouse
enters a child element the div should remain visible.</p>
<p>
<iframe src="http://JavaScript.FAQTS.com/" width="100%">
<a href="http://JavaScript.FAQTS.com/">JavaScript.FAQTS.com</a>
</iframe>
</p>
</div>
<p>Here you can
<input type="button" value="show"
onclick="var div;
if (document.getElementById) {
div = document.getElementById('div1');
showElement(div);
}">
the div element again.
</p>
</body>
</html>
--
Martin Honnen
http://JavaScript.FAQTs.com/ 
