Question

我有一张图片（png），其中显示了3个部分，这些部分链接到3个不同的页面。它应该像这样工作：当您将鼠标悬停在图像的一部分（对应于特定部分）（即多边形）上时，图像应会发生变化，但仅会改变其中的一部分。基本上有一些房屋，类型取决于特定的区域，并且属于该区域的房屋在悬停时会更改颜色。

当我将鼠标悬停在某个部分上时，我正在使用html地图和区域标签以及jQuery显示具有背景图像的div。它有效，但一直闪烁。如何防止闪烁？（坐标还不正确，它确实是一个多边形:)）

<div style="position: relative;" class="map-container">
  <img src="{image}" usemap="#main-map" class="map-empty">
  <map name="main-map">
   <area shape="poly" coords="0,0,550,0,550,198,0,198" href="#sprava" id="sprava" style="z-index: 2;" />
  <area shape="poly" coords="150,0,250,0,250,100,150,100" href="#firmy" id="firmy" />
  <area shape="poly" coords="80,100,200,100,200,150,80,150" href="#domy" id="domy" />
</map>
<div class="spravaimg">
  </div>
</div>

jQuery( document ).ready(function() {

  jQuery('#sprava').mouseenter(function() {
      jQuery('.spravaimg').show();
    });
    jQuery('#sprava').mouseleave(function() {
      jQuery('.spravaimg').hide();
    });

});

.spravaimg { 
position: absolute; 
top: 3px; 
left: 0; 
width: 545px; 
height: 300px; 
background-image: url('{image}'); 
display: none; 
z-index: 1;  
}

如果它是多边形，如何在悬停时更改图像的一部分？

0 个答案: