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 visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.

Answers


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.


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

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


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.


Need Your Help

How to deploy war file in root(/) context to Wildfly ver 9.0.1

java eclipse jboss wildfly

I am newbie for Wildfly till now I was working on tomcat to deploy my applications. Now just for add on features of Wildfly we want to move on to this.