【发布时间】：2014-05-15 10:46:16
【问题描述】：
我已使用以下网站 (http://www.html-map.com/) 创建了一张图片地图以供在我的网站上使用。目前，当用户将鼠标悬停在一个大陆上时，他们会看到一个指向特定页面的链接，但是没有视觉提示表明该大陆是一个链接。理想情况下，大陆顶部会覆盖某种图标，该图标会改变颜色，或者最好突出显示大陆本身。
由于后者需要 IE8 不支持的 SVG，所以我选择了前者，尽管我认为我以完全错误的方式接近它。
目前，我正在使用绝对定位在图像顶部覆盖一个图标，但这意味着首先映射我的图像的整个过程已经浪费了，因为链接需要在图标上而不是在图像映射中。
我的问题是，如何使用我已经定义的映射区域来覆盖每个大陆的图标，同时保留链接行为。
我尝试在区域标签中嵌入跨度，但这根本不起作用。任何帮助或替代方法将不胜感激。
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/
【问题讨论】：
-
copy。这可以帮助你。
-
您的解决方案将涉及创建多个图像并将它们放入一个有点过时的精灵中。我想尽量避免图像处理，因为我不擅长使用 Photoshop。
-
如果您不想处理多个图像，那么我认为您可以使用
css grayscale或类似的东西来更改该特定区域的颜色。 -
我认为这行不通，因为我的区域是矩形而不是多边形。
标签： javascript html css maps imagemap