www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] onMouseOver animation = DIV contains IMG

  1. #1
    Join Date
    Feb 2014
    Posts
    5

    resolved [RESOLVED] onMouseOver animation = DIV contains IMG

    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.

  2. #2
    Join Date
    Feb 2014
    Posts
    5
    //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 moveUp(){
    if ( counter < 5) {
    imgObj.style.top = parseInt(imgObj.style.top) - 3 + 'px';
    counter ++;
    tim = setTimeout("moveUp()", 20);
    }
    else {
    counter = 0;
    clearTimeout(tim);
    imgObj.style.top='-18px';
    }
    }


    function moveDown(){
    //console.log("moveDown");
    if (counter < 5) {
    imgObj.style.top = parseInt(imgObj.style.top) + 3 + 'px';
    counter ++;
    tim = setTimeout("moveDown()", 20);
    }
    else {
    clearTimeout(tim);
    counter = 0;
    imgObj.style.top='0px';
    }
    }

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



    window.onload =init;

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,635
    try onmouseenter/onmouseleave
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Feb 2014
    Posts
    5
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles