25

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.

scarba05
  • 2,943
  • 1
  • 27
  • 29

3 Answers3

19

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.

Su'
  • 2,128
  • 20
  • 22
11

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.

Sapph
  • 6,118
  • 1
  • 29
  • 32
  • @PeterBZ It's probably headache inducing, but I believe you can add fallback behavior for browsers that don't support SVG (i.e. http://www.kaizou.org/2009/03/inline-svg-fall). Trade-off of how much development time you want to sink to make it completely cross-browser versus how much easy it is to implement, I suppose. Good luck! – Sapph Feb 18 '11 at 17:45
  • Check out **raphael.js** - it's SVG for all browsers IE6+. As far as I know, it does everything except the stock browser in early Android phones. – user56reinstatemonica8 Feb 20 '12 at 12:33
  • Your JSfiddle gives me different result with ( Internet Explorer , Chrome) and Firefox , what could it be, Firefox just prints the top part of the triangle. – Francisco Corrales Morales Jan 21 '14 at 19:15
4

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176