突出顯示圖像地圖上的區域

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：作為替代映射程序，請嘗試“快速圖像映射”