Question

我有荷兰的图像地图，对某些区域有叠加效果。我可以通过多种方式实现这一效果：

1）加载每张图片。将所有图像设置为＆＃39; display：none＆＃39;并运行JS（onMouseOver（str））以显示鼠标开启的图像并隐藏所有其他图像。

的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）加载一个图像并使用JS（onMouseOver（str））来更改图像的来源。

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);
      }
}

当我使用第一种方法时，每次加载页面时，当我第一次悬停某个区域时，图像会闪烁。如果我再次悬停该区域，则直到我再次重新加载页面为止。当我使用第二种方法时，图像永远不会闪烁。

有人可以向我解释这种不同的行为吗？我发现它有点违反直觉。使用第一种方法，每个图像都已加载，而使用第二种方法，当鼠标位于特定区域时，将加载图像。在我看来，第一种方法必须更顺畅，但它不是......

更改源时，更改css时图像叠加闪烁

0 个答案: