onMouseOver event is triggering the parent element's code

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

Nathan Sokalski

I have a <div> tag that contains 2 <img> tags. The 2 <img> tags do not have
any events inside them, but when I move the cursor off of one of these 2
<img> tags (the cursor always being within the <div> tag) the <div>'s
onMouseOut event is triggered. How can I prevent moving off of the 2
contained <img>'s from doing anything? Thanks.


<IMG id="imgUnderlay" src="images/frog.gif" border="0" name="imgUnderlay"
onmouseover="Panel1.style.display='block';Panel1.style.left=offsetLeft;Panel1.style.top=offsetTop;Panel1_X=offsetLeft;Panel1_Y=offsetTop;return
true;">

<div id="Panel1" class="Nothing"
onmouseout="if(event.offsetX<0||event.offsetX>=150||event.offsetY<0||event.offsetY>=125){Panel1.style.display='none';return
true;}else{return false;}" align="Center"
style="height:125px;width:150px;background-image:url(images/rainbow.gif);">
<IMG src="images/explanationicon.gif" align="absMiddle" height="51"
width="53"><br><br>
<IMG src="images/explanationicon.gif" align="absMiddle" height="51"
width="53">
</div>
 
Nathan Sokalski said:
I have a <div> tag that contains 2 <img> tags. The 2 <img> tags do not have
any events inside them, but when I move the cursor off of one of these 2
<img> tags (the cursor always being within the <div> tag) the <div>'s
onMouseOut event is triggered. How can I prevent moving off of the 2
contained <img>'s from doing anything? Thanks.


<IMG id="imgUnderlay" src="images/frog.gif" border="0" name="imgUnderlay"
onmouseover="Panel1.style.display='block';Panel1.style.left=offsetLeft;Panel
1.style.top=offsetTop;Panel1_X=offsetLeft;Panel1_Y=offsetTop;return
true;">

<div id="Panel1" class="Nothing"
Click to expand...
onmouseout="if(event.offsetX said:
true;}else{return false;}" align="Center"
style="height:125px;width:150px;background-image:url(images/rainbow.gif);">
<IMG src="images/explanationicon.gif" align="absMiddle" height="51"
width="53"><br><br>
<IMG src="images/explanationicon.gif" align="absMiddle" height="51"
width="53">
</div>
Click to expand...

Google: event bubble dhtml

the code in your onmouseout event need to test that the event.srcElement is
the div.

onmouseevent="Panel1_onmouseout.call(this)"

<script type="text/javascript">

function Panel1_onmouseout()
{
if (event.srcEvent == this)
{
if (event.offsetX < 0 || event.offsetX >= 150 || event.offsetY < 0
|| event.offsetY >= 125)
{
Panel1.style.display='none';
return true;
}
else
{
return false;
}
}
}

</script>
 
Back
Top