Javascript 突出显示图像地图上的区域

我使用以下站点（）创建了一个图像地图，供我的站点使用。目前，当用户将鼠标悬停在一个大陆上时，他们会看到一个指向特定页面的链接，但是，没有任何视觉提示表明该大陆是一个链接。理想情况下，在这块大陆的顶部会有某种图标，可以改变颜色，或者最好是突出显示这块大陆本身

由于后者需要IE8不支持的SVG，所以我选择了前者，尽管我认为我的做法是完全错误的

目前，我正在使用绝对定位将图标覆盖在图像顶部，但这意味着首先映射图像的整个过程已经白费了，因为链接需要位于图标上，而不是图像地图内

我的问题是，如何使用我已经定义的映射区域覆盖每个大陆的图标，同时保留链接行为

我已经尝试将跨度嵌入到区域标记中，但这根本不起作用。任何帮助或替代方法都将不胜感激

HTML

我在这里创作了一把小提琴：

---

在我看来，我会为每个悬停区域创建6个新图像。您只需更改悬停区域的显式颜色

然后使用javascript加载正确区域的正确图像。 我曾经有过这样一个项目，但我还在寻找

给我一点时间

PS：作为一个可选的映射程序，请尝试

---

“快速图像地图”

。这可以帮助你。你的解决方案包括创建多个图像，并将它们放入一个有点旧的精灵中。我想尽量避免图像处理，因为我不太擅长photoshop。如果你不想处理多个图像，然后我想你可以使用

css灰度

或类似的东西来改变特定区域的颜色。我不认为这会起作用，因为我的区域是矩形而不是多边形。这是一个坏主意，因为你必须加载额外的6幅图像或一张精灵表，然后使用不必要的Javascript。我想我只会使用绝对定位法，放弃我已经做过的制图工作。那么你是如何解决这个问题的呢？你的想法是只在该区域加载图像？这是很难实现的，因为位置不同。它们不是图像。它们是作为引导字体的一部分加载的图标。这是实现此功能的唯一方法，而无需创建强大的解决方案。我有没有提到这也必须适用于手机？因此，最好的解决方案是首先使用图标，因为移动设备上没有悬停效果。好的，如果移动设备需要它，我理解。：）sry只是想告诉你，这就是我的意思。

<div class="worldMap">
   <img src="http://s30.postimg.org/8bqsljpvl/worldmap.png" alt="" usemap="#map1400147861975">
   <map id="map1400147861975" name="map1400147861975">
     <area shape="rect" coords="109.99999559765627,10.999995597656266,159.46666159765627,34.46666159765627" title="Europe" alt="Europe" href="#Europe" target="_self">
     <area shape="rect" coords="110.99999559765627,40.999995597656266,147.46666159765627,91.46666159765627" title="Africa" alt="Africa" href="#Africa" target="_self">
     <area shape="rect" coords="63,56,96,103" title="South America" alt="South America" href="#SouthAmerica" target="_self">
     <area shape="rect" coords="25,29,73,42" title="North America" alt="North America" href="#NorthAmerica" target="_self">
     <area shape="rect" coords="25.999995597656266,41.999995597656266,83.46666159765627,55.46666159765627" title="Central America" alt="Central America" href="#CentralAmerica" target="_self">
     <area shape="rect" coords="159.99999559765627,10.999995597656266,251.46666159765627,64.46666159765627" title="Asia" alt="Asia" href="#Asia" target="_self">
     <area shape="rect" coords="190.99999559765627,66.99999559765627,245.46666159765627,101.46666159765627" title="Austrilasia" alt="Austrilasia" href="#Austrilasia" target="_self">
   </map>
   <span class="glyphicon glyphicon-briefcase europe"></span>
</div>

.europe{
  position: absolute;
  left: 125px;
  top: 22px;
  color: blue;
}

worldMap{
  position: relative;
}