mouse events

[ketenshi]

Hello,

I want to create a pop up when I hover over a div layer. This works perfectly fine until I add another layer inside it.

Here is an example of the code:
[html]
<div style="height: 300px; border: 1px solid;" onmouseover="alert('over')" onmouseout="alert('out')">
<div style="position: absolute; left: 200px; height: 200px; width: 100px; border: 1px solid green"></div>
</div>
[/html]

Basically the problem is when my mouse hovers over the small div layer inside the big layer an alert will come out indicating it is out of the big div layer, and then another popup indicates that it is back in.

What I want is for that alert to pop up only when I'm out of the big div layer.

I've tried using zindexes but it doesn't do anything...

Thanks in advance

[dorinbogdan]

For IExplorer, use "onmouseenter" and "onmouseleave" events, or write a event handler function and set window.event.cancelBubble = true.

For other browsers call event.stopPropagation() method inside the event handler function.

[acoder]

See this page for more info.

[hotnoob]

Well, thats easy, you need to add the function to both divs...
think if it like an image.

you have a square image
--------
|Your|
|Box |
--------
Now you ad another one inside it
---------
| --- |
| --- |
----------

Then you put your mouse over the inner box. Now technically it is over both images, but visually its not.
Thats how it works
What you could do though, if your too lazy, put an invisible div over it, however, the downside is that the user would not be able to touch anything under it.

<div style="position: absolute; left: (X Coord)px; top: (Y Coord)px; width: (width of area to cover)px; height: (height of area to cover)px;" (functional data)>(nothing goes here.)</div>

Then you input the coords that it is over your object.

Well, good luck, i hoped it helped, and sorry about the horrific grammar. i wasn't planning to write a book on it. :P