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

Question

I have used the following site ( http://www.html-map.com/ ) to create an image map for use on my site. Currently, when the user hovers over a continent they are presented with a link to a specific page however, there is no visual cue to indicate that the continent is a link. Ideally, there would be some sort of icon overlayed on top of the continent that would change colour or preferably the continent itself would be highlighted.

As the latter would require SVG which is not supported in IE8, I have opted for the former although I think I am approaching it in completely the wrong way.

Currently, I am overlaying an icon over the top of the image using absolute positioning but this means that the whole process of mapping my image in the first place has gone to waste as the link would need to be on the icon and not within the image map.

My question is, how can i use the mapped areas I have already defined to overlay the icon for each continent whilst preserving the link behaviour.

I've tried embedding the span within the area tag but this doesn't work at all. Any help or alternative approaches would be greatly appreciated.

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

I have created a fiddle here: http://jsfiddle.net/jezzipin/z6UnR/2/

Answer 1

In my opinion i would creat 6 new images for every hovered area. you have to change just the explicit color of the hovered area.

Then you load with javascript always the right image for the right area. I had once such a Project, but im still searching.

give me a while.

PS: As an alternativ mapping program, try "Fast Image Map"