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

Question

我已经使用以下网站（ http://www.html-map.com/ ）创建了一个在我的网站上使用的图像地图。 当前，当用户将鼠标悬停在一个大陆上时，他们会看到指向特定页面的链接，但是没有视觉提示来表明该大陆是一个链接。 理想情况下，大陆上会覆盖某种图标，该图标会改变颜色，或者最好将大陆本身突出显示。

由于后者需要IE8中不支持的SVG，因此我选择了前者，尽管我认为我完全以错误的方式来处理它。

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

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

我尝试将span嵌入area标记中，但这根本不起作用。 任何帮助或替代方法将不胜感激。

HTML

<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>

CSS

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

worldMap{
  position: relative;
}

我在这里创建了一个小提琴： http : //jsfiddle.net/jezzipin/z6UnR/2/

Answer 1

我认为我将为每个悬停区域创建6张新图像。 您只需要更改悬停区域的显式颜色即可。

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

给我一点时间。

PS：作为替代映射程序，请尝试“快速图像映射”