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