[RESOLVED] onMouseOver animation = DIV contains IMG

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] onMouseOver animation = DIV contains IMG

dtrip

Hello people!

Here is the HTML =

<div class="stili" onMouseOver="moveUp();" onMouseOut="moveDown()";> <h2> Flowers </h2> <img id="myImage" src="img/tabela.png"></div>

As you can see, there is a DIV containing an H2 and an IMG.
When the mouse enters the DIV, the image scrolls a little up.
When the mouse leaves the DIV, the image scrolls back again.
It works Ok.

The problem is when the mouse goes over the IMG, it moves erratically.
I suspect this is because the DIV gets an onMouseOut event when the mouse goes over the IMG.
Is this how it works ? Because the pointer is still inside the DIV too, so technically it is not correct to
send him an onMouseOut event, is it ?

Next comes the Javascript, but I dont think there is a problem there.

dtrip

//The Javascript: as noted above, it works fine UNTIL the mouse goes over the inside IMG
//EDIT: I guess this is the "bubble" problem of the "onMouseOver" method, which is an identified issue
//Is there some workaround this ?

var imgObj = null;
var tim;
var counter;

function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.top= '0px';
counter = 0;
}

function doNothing() {
console.log("doNothing");
}

window.onload =init;

Padonak

try onmouseenter/onmouseleave

dtrip

Thanks !
I Googled those two and found some articles that say that it only works for IE,
but that aint true, my browser is Mozilla Firefox currently and it works fine.