1

I have a complex imagemap with several mapped areas. On mouseover or click I want to overlay these imagemap with other images which do have exactly the same size and shall be in exactly the same position. So far, so good.

Doing this, I added a .fadeIn() and .fadeOut() on my mouseover or on click. Common problem - loads of solutions online. The fadeIn() flickers/blinks. I found this solution here jQuery fade flickers . So I added the .stop() (I did not understand the animate() solution Jquery - fadeIn/fadeOut flicker on rollover or How to stop fadeIn() blinking?, or better, did not know how to implement it).

But now, I cannot control the time of my .fadeIn() and .fadeOut() anymore. Moreover, only the .mouseenter() works, but not the .click(). Apart from that, everything works fine. The image overlays, the faded in images are in the right spot... Its just that fade which wont work.

Below an exerpt of my code.

<head>
<script>

//PRELOAD THE IMAGES
verde = new Image(698, 360)
verde.src = "imagenes_png/verde_mouse.png";

azul = new Image(698, 360)
azul.src = "imagenes_png/azul_mouse.png";

//there are more images preloaded


//LOAD THE DOM BEFORE JS FILLS IT WITH IMG
$(document).ready(function() { 
document.getElementById("verde").appendChild(verde);
document.getElementById("azul").appendChild(azul);
});


//jQUERY FADE
$(document).ready(function() {
    $(function() {
    $("#verdeA").click(function() {
         $("#verde").stop().fadeIn("1000");
    });
    $("#verdeA").mouseleave(function() {
        $("#verde").stop().fadeOut("500");
    });
    $("#azulA").mouseenter(function() {
        $("#azul").stop().fadeIn("5000");
    });
    $("#azulA").mouseleave(function() {
        $("#azul").stop().fadeOut("500");
        });    
    });  
});

</script>
</head>

<body>
<!-- INSERT THE PICTURE -->
<div id="juego_bosque">
<img name="bosque" id="bosque1" src="imagenes_png/bosque_mapa.png" width="698" height="360" border="0" usemap="#bosque_m" alt="Bosque con animales" style="position:absolute" />

<!-- CREATE THE MAP -->
<map name="bosque_m" id="bosque_m">
<area id="verdeA" shape="poly" coords="643,324,646,322,648,321,651,320,654,320,656,321,658,323,659,324,660,327,659,330,657,332,655,334,654,335,654,332,653,329,653,327,650,326,648,328,648,331,649,332,650,334,652,335,654,337,656,338,658,339,660,341,662,342,662,345,661,348,660,350,657,351,656,351,656,346,656,345,653,347,651,350,650,351,651,353,651,354,653,356,656,356,658,356,660,356,662,356,666,354,668,351,669,349,670,347,669,346,665,346,666,342,667,341,668,340,670,339,672,339,674,341,676,344,676,347,675,351,672,355,670,357,669,360,642,360,644,356,646,353,647,350,648,346,650,340,650,337,646,332,645,330,644,327,643,324" 
alt="" />
    <area shape="poly" coords="472,249,476,249,479,250,483,251,484,255,485,258,487,261,489,263,493,265,498,266,501,268,504,270,504,271,499,270,495,269,489,268,486,269,484,270,480,269,476,268,473,266,470,262,469,260,468,256,470,253,472,249" 
id="azulA" alt="" />

<!-- HIDDEN PRELOADED IMAGES --> 
<div id="azul" style="display:none; position:absolute"></div>
<div id="verde" style="display:none; position:relative"></div>

</div>

</body>

Here a Fiddle http://jsfiddle.net/6fq6ymx2/ On the Fiddle ony the two very right highlighted graphics have an effect added.

Community
  • 1
  • 1
Maccaroni
  • 19
  • 7
  • 1
    Please put your code in a fiddle so we can help you a little bit. – Guillermo Oct 17 '14 at 22:42
  • Also, have you tried to pass params to the stop method .stop(true, true) ? – Guillermo Oct 17 '14 at 22:45
  • @Guillermo sorry for the delay. I was not at home through out the weekend. Here is the Fiddel http://jsfiddle.net/6fq6ymx2/ I tried the true, true parameters already but that left me with the flickering effect again... On the fiddle only the "green" and the "blue" stuff have a mouseover or click effect. That are the highlighted grafics on the very right. – Maccaroni Oct 20 '14 at 14:32

0 Answers0