title: Highlight areas on an image map
body: <p>I have used the following site (<a href="http://www.html-map.com/" rel="nofollow">http://www.html-map.com/</a>) 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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="worldMap"&gt;
     &lt;img src="http://s30.postimg.org/8bqsljpvl/worldmap.png" alt="" usemap="#map1400147861975"&gt;
     &lt;map id="map1400147861975" name="map1400147861975"&gt;
       &lt;area shape="rect" coords="109.99999559765627,10.999995597656266,159.46666159765627,34.46666159765627" title="Europe" alt="Europe" href="#Europe" target="_self"&gt;
       &lt;area shape="rect" coords="110.99999559765627,40.999995597656266,147.46666159765627,91.46666159765627" title="Africa" alt="Africa" href="#Africa" target="_self"&gt;
       &lt;area shape="rect" coords="63,56,96,103" title="South America" alt="South America" href="#SouthAmerica" target="_self"&gt;
       &lt;area shape="rect" coords="25,29,73,42" title="North America" alt="North America" href="#NorthAmerica" target="_self"&gt;
       &lt;area shape="rect" coords="25.999995597656266,41.999995597656266,83.46666159765627,55.46666159765627" title="Central America" alt="Central America" href="#CentralAmerica" target="_self"&gt;
       &lt;area shape="rect" coords="159.99999559765627,10.999995597656266,251.46666159765627,64.46666159765627" title="Asia" alt="Asia" href="#Asia" target="_self"&gt;
       &lt;area shape="rect" coords="190.99999559765627,66.99999559765627,245.46666159765627,101.46666159765627" title="Austrilasia" alt="Austrilasia" href="#Austrilasia" target="_self"&gt;
     &lt;/map&gt;
     &lt;span class="glyphicon glyphicon-briefcase europe"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.europe{
    position: absolute;
    left: 125px;
    top: 22px;
    color: blue;
  }
  
  worldMap{
    position: relative;
  }
  </code></pre>
  
  <p>I have created a fiddle here:
  <a href="http://jsfiddle.net/jezzipin/z6UnR/2/" rel="nofollow">http://jsfiddle.net/jezzipin/z6UnR/2/</a></p>