image overlay blinks when change css not when changing source

Joost Source

I have an imagemap of the Netherlands with an overlay effect on some of the areas. I can accomplish this effect in multiple ways:

1) Load every image. Set all but 1 image on 'display:none' and run JS (onMouseOver(str)) to display the image that one has the mouse on and hide all others.

css:

.verberg {
  display: none;
}

JS:

var nederland = $('#Nederland');
var map1= $('#Friesland');
var map2= $('#Groningen');
var map3= $('#Drenthe');
var allmaps = $('.kaartje');  

function mapOnMouseOver(str) {
   var kaartnamen = ['Nederland', 'Friesland','Groningen', 'Drenthe']
   var imgnamen = [nederland, map1, map2, map3]

   var i = kaartnamen.indexOf(str);
   if (i > -1) {
     elementje = imgnamen[i];
     allmaps.addClass('verberg');
     elementje.removeClass('verberg');
   }

 }

2) Load one image and use JS (onMouseOver(str)) to change the source of the image.

JS:

function mapOnMouseOver(str) {

  var kaartnamen = ['Nederland', 'Friesland','Groningen', 'Drenthe']
  var urlsrc = ['nl.png','fr.png','gr.png','dr.png']

  var i = kaartnamen.indexOf(str);
  if (i > -1) {
    newsrc = urlsrc[i];
    $("#Nederland").attr("src","http://xxxxxxx/maps/"+ newsrc);
      }
}

When I use the first method, everytime I load the page the image blinks when I hover an area for the first time. If I hover that area for a second time it doesn't until I reload the page again. When I use the second method the image never blinks.

Can someone explain this different behaviour to me? I find it a bit counterintuitive. With the first method every image is already loaded, while with the second method the images are loaded when the mouse is on a specific area. It seems to me that the first method must be smoother, but it isn't...

javascripthtmlcss

Answers

comments powered by Disqus