JS - Onmouseenter 'Event Bubbling'

110 views Asked by At


I have a problem with event Bubbling on my website. At least I guess it is event Bubbling. My site consists of images stacked on top of each other in conjunction with areamaps to have clickable and hoverable areas - not the whole images are supposed to be the hovertarget.

When you hover over certain areamaps the site changes the src of a image to another. I managed that via a function, no problem. I have this in my html:

<map>
<area shape="rect" coords="870,0, 1040,110" alt="story2" 
  onmouseenter="glow5SecStop(); overlay1FadeOut();  changeImage('overlay1','images/00/00-story2.png'); overlay1FadeIn();" 
  onmouseleave="changeImage('overlay1','images/00/overlay-leer.png'); glowsAn();" style="cursor:help;"/>
</map>

Onmouseenter:
function1 stops a setTimeout,

function glow5SecStop() {
if (glow5secAn==1) {
    clearTimeout(glowCheck3);
    clearTimeout(glowCheck4);
    glowCheck3 = null;
    glowCheck4 = null;
    $("#glowsImg").fadeTo(0,0);
    }
}

function2 fades out a image in 0seconds to 0

function changeImage(target,image)  {
        sourceImage.src = image;            
        document.getElementById(target).src = sourceImage.src;
    }

function3 changes a imagesource

sourceImage = new Image();

function changeImage(target,image)  {
        sourceImage.src = image;            
        document.getElementById(target).src = sourceImage.src;
    }

function4 fades last image in

function overlay1FadeIn() {
        $("#overlay1").fadeIn(300);
        document.getElementById("glowsImg").style.visibility = "hidden";
    }


Onmouseleave
function1 changes imagesource back to a complete transparent image. Its the same as in Onmousenter.
function2 activates a glow

function glowsAn() {
    document.getElementById("glowsImg").style.visibility = "visible";
    }


That all works perfectly fine, but if I hover fast over the area it will not finish and stack up and when I stay hover over the area it will play as often as I hovered over it.

I have seen some solutions to the eventbubbling problem in other forums and here with changing onmouseover to onmousenter, but that didn't do the trick here.
I am pretty much a noob to programming and I am looking for a specific solution to this problem.

Simon

0

There are 0 answers