While working on my website, I utilized the services of a site called to generate an image map. However, I faced an issue where there was no visual indication that the continents were clickable links. My aim is to have an icon overlaid on each continent that changes color upon hovering or ideally highlights the continent itself.
Unfortunately, using SVG for highlighting would not be compatible with IE8, so I resorted to overlaying icons using absolute positioning. This led to a dilemma as the link needed to be on the icon and not within the image map, rendering the mapping process redundant.
My query revolves around finding a way to utilize the already defined mapped areas to overlay icons on each continent while retaining the link functionality seamlessly. I attempted embedding spans within area tags but to no avail. Any guidance or alternative strategies would be highly appreciated.
I've included the HTML and CSS code snippets for reference:
<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">
<!-- Rest of the area definitions go here -->
</map>
</div>
.europe{
position: absolute;
left: 125px;
top: 22px;
color: blue;
}
worldMap{
position: relative;
}
For a live demonstration, you can check out this fiddle: http://jsfiddle.net/jezzipin/z6UnR/2/