html area tag with holes

Question

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:

http://jsfiddle.net/WbKqS/

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?

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

Richard Ev · Accepted Answer · 2011-12-21T11:40:31.160

2

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

edited Dec 21 '11 at 11:40

answered Dec 21 '11 at 11:23

Richard Ev

52,939
59
191
278

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
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 Ev Dec 21 '11 at 14:01

score 1 · Answer 2 · answered Dec 29 '11 at 20:17

1

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

answered Dec 29 '11 at 20:17

defau1t

10,593
2
35
47

score 0 · Answer 3 · answered Jun 02 '18 at 20:34

I wish it worked that way, but it does not as of right now. Try using SVG format instead. That's Scalable Vector Graphics technology. SVGs support holes and multiple shapes or islands if you will. Hope this helps, it helped me in Firefox. If that method fails, I'll look into using <canvas> tag.

score 0 · Answer 4 · answered Dec 21 '11 at 11:04

0

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.

answered Dec 21 '11 at 11:04

Chris Laarman

1,559
12
25

html area tag with holes

4 Answers4