Take the 2-minute tour ×

The problem I have about using the map & area tag is that I havent been able to find out a solution to having "holes" in the area, for example imagine a lake on map, you dont want that area to be clickable.

Example code:


In this example I have placed 3 lakes on the map but I dont want the lakes to have the hovereffect/being clickable, is this possible? Maybe with another technique?

share|improve this question
Interesting question, i look forward to seeing the answer! –  Undefined Dec 21 '11 at 10:06

3 Answers 3

up vote 1 down vote accepted

HTML areas don't support having holes or multiple sets of coords, so you'll need to go with a workaround.

How about a solution based on the approach illustrated below?

area with fake hole

share|improve this answer
That is an idea, is it however possible to hide the lines at the "end" of the shape? So it looks like a solid shape. –  Johan Svensson Dec 21 '11 at 11:26
My initial diagram was misleading, I've updated it. –  Richard Everett Dec 21 '11 at 11:40
This is a good idea, is it however possible to have a border around it somehow? On both the inside and outside? –  Johan Svensson Dec 21 '11 at 13:44
Not with this approach, no. You could however have two copied of your map image; one in the "normal" state, one with a border. You would need to display the image with a border on mouseover. For a smooth user experience you would want to either preload the bordered map, or use CSS sprites. However you would no longer need to use maphighlight if you did this. –  Richard Everett Dec 21 '11 at 14:01

I don't think this is a good idea to develope this using area map. I would use Raphael instead. a map example with Raphael

share|improve this answer

You could position other 'hidden' (div) elements over the lakes, preventing the hover effect from being triggered. Disadvantage is shape of the elements (square). Using canvas could be a solution for that, but not all browsers support it.

share|improve this answer

Your Answer


