如何突出显示mouseover上的图像部分？

Question

我需要显示一个包含约70个区域的图片。假设鼠标光标所在的图像地图区域以某种颜色突出显示。

这是可能的，如果是的话，怎么样？

Answer 1

真正使用它在生产中我会说这是后答案：http://plugins.jquery.com/project/maphilight

使用它需要几行代码才能为任何图像映射实现该功能。

Answer 2

是的，这是可能的。我已经用jquery和图像地图区域mouseenter/mouseleave事件做了确切的事情，但没有完成70个区域。它只会为你更多的工作。您可以考虑通过mouseover上的ajax调用来加载图像，或者使用精灵和定位来加载图像，这样就不需要将70个图像加载到dom中。

的jQuery：

$(document).ready(function() { 

    $(".map-areas area").mouseenter(function() { 
     var idx = $(".map-areas area").index(this); 
     $(".map-hovers img:eq(" + idx + ")").show(); 
     return false; 
    }).mouseleave(function() { 
     $(".map-hovers img").hide(); 
     return false; 
    }); 

}); 

凡.MAP-悬停是拥有所有你想要打好了地图的顶部图像一个div。您可以根据需要定位它们，或者使图像与图像映射的大小相同，但具有透明度。

而且一些HTML遵循：

注：地图徘徊容器内与IMG指数注意如何图像地图区域指数排队？ 也：图像映射必须指向一个透明的gif，并将背景图像设置为您要显示的实际图像。这是一个跨浏览器的东西 - 不记得确切的原因。

<div id="container"> 
     <img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map/Carte" usemap="#region-map" /> 
     <div class="map-hovers"> 
      <img src="/images/map/sunset-country.png" alt="Sunset Country" /> 
      <img src="/images/map/north-of-superior.png" alt="North of Superior" /> 
      <img src="/images/map/algomas-country.png" alt="Algoma's Country" /> 
      <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" /> 
      <img src="/images/map/rainbow-country.png" alt="Rainbow Country" /> 
      <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" /> 
      <img src="/images/map/muskoka.png" alt="Muskoka" />  
     </div> 
</div> 
    <map name="region-map" id="region-map" class="map-areas"> 
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" /> 
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" /> 
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" /> 
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" /> 
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" /> 
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" /> 
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" /> 
    </map> 

Answer 3

我不知道是否有做一个很酷的方式，但你可以把你的图片作为一个块级元素的背景图片，用透明的图片和影像地图覆盖它，然后替换该透明。图片上用图片的区域中突出了鼠标悬停事件

不利的一面，你需要高亮区域

70个图像

Answer 4

我试图使用ScottE的解决方案，但不幸的是，这意味着添加目标图像作为身体背景。

我的解决方案是非常接近他，但使用适当的图像

的jQuery：

$(document).ready(function() { 

    $(".map-areas area").mouseenter(function() { 
     var idx = $(".map-areas area").index(this); 
     $(".map-hovers img:eq(" + idx + ")").show(); 
     return false; 
    }); 
    $(".map-hovers img").mouseleave(function() { 
     $(".map-hovers img").hide(); 
     return false; 
    }); 

}); 

这里的关键概念是，一旦你进入地图区域，你看地图，悬停图像，然后在鼠标下面变成你的活动层 - 简单地检测你离开那张图像是什么使光滑。

HTML：（几乎是相同的，不需要跨图像）

<div id="container"> 
     <img src="/images/full-map.png" width="220" height="238" class="map-trans" alt="Map/Carte" usemap="#region-map" /> 
     <div class="map-hovers"> 
      <img src="/images/map/sunset-country.png" alt="Sunset Country" /> 
      <img src="/images/map/north-of-superior.png" alt="North of Superior" /> 
      <img src="/images/map/algomas-country.png" alt="Algoma's Country" /> 
      <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" /> 
      <img src="/images/map/rainbow-country.png" alt="Rainbow Country" /> 
      <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" /> 
      <img src="/images/map/muskoka.png" alt="Muskoka" />  
     </div> 
</div> 
    <map name="region-map" id="region-map" class="map-areas"> 
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" /> 
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" /> 
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" /> 
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" /> 
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" /> 
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" /> 
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" /> 
    </map>