Div onmouseout with images inside , how to make this work without “getting out” the div every time i select a image?

Question

my problem is "simple" , i have a div with a onmouseout property with an alert("1"), that div have 2 images inside, everytime i select a image that alert show up.

example.

<div onmouseout="alert(1)">
<img src="imgs/image1.png"  onmouseover="loadimg(this)" id=image1>
 <img src="imgs/image2.png"  onmouseover="loadimg(this)" id=image2>
</div>

i want to show that alert only if my mouse get out of all div , this div should include images too.

Thanks you.

Answer 1

Your best bet would be .mouseleave() in jQuery. Here's a demo of it in jsfiddle.

If you want to avoid using jQuery, have a look at this discussion on comp.lang.javascript on a similar subject.