Highlight areas on an image map

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/

[copy](http://stackoverflow.com/questions/1201052/how-do-i-highlight-parts-of-an-imagemap-on-mouseover). this can help you. — Atal Shrivastava, May 15 '14 at 10:56
Your solution would involve creating multiple images and putting them into a sprite which is a bit old-hat. I want to try and avoid image manipulation as I'm not to good with photoshop. — jezzipin, May 15 '14 at 11:05
if you dont want to work with multiple images, then i think you can use `css grayscale` or something similar to that to change the color of that particular region. — Atal Shrivastava, May 15 '14 at 11:08
I don't think this would work as my areas are rectangular and not polys. — jezzipin, May 15 '14 at 11:10

score 0 · Answer 1 · answered May 15 '14 at 11:48

0

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"

answered May 15 '14 at 11:48

Kjenos

529
2
5
19

This is a bad idea as you then have to load an additional 6 images or a sprite sheet and then use unneccesary Javascript. I guess I will just use the absolute positioning method and abandon the mapping stuff I have done. – jezzipin May 15 '14 at 11:56
how do you imagen to solve this problem then? your idea is just to load just images over the area? this is quite hard to realise because of the different positions. – Kjenos May 15 '14 at 12:06
They are not images. They are icons loaded as part of the Bootstrap font. It is the only way to acheive this functionality without creating a hefty solution. Did I mention this must also work on mobiles? Therefore the best solution would be the icon in the first place as there are no hover effects on mobile. – jezzipin May 15 '14 at 12:20
ok, if you need it for mobile to, i understand. :) sry just to show you, this was the site i meant. http://www.focusmem.ch/ – Kjenos May 15 '14 at 12:38

Highlight areas on an image map

1 Answers1