Html area label with holes

Question

The problem with using the map and area tag is that I couldn’t find a solution to have “holes” in the area, for example, imagine a lake on the map, you don’t want this area to be interactive.

Code example:

http://jsfiddle.net/WbKqS/

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

Answer 1

HTML area does not support holes or multiple sets of coords , so you need to go around this.

How about a solution based on the approach shown below?

Answer 2

I don’t think it’s a good idea to develop this using a region map. Instead, I would use Raphael . a example of a map with Raphael

Answer 3

You can position other “hidden” (div) elements above the lakes, preventing the hover from starting. The disadvantage is the shape of the elements (square). Using a canvas may be the solution to this, but not all browsers support it.