Apply Css To Area Map

I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visibl

Solution 1:

Not possible with CSS. You might check out the Map Hilight jQuery plugin, though.

EDIT 10.2011ImageMapster is a more recent, and more powerful plugin you should also check out.

Solution 2:

If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?

I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.

The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.

An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.

Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.

Update again: This would also solve the zooming problem you asked about in another question.

Solution 3:

Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.