Hover effects on irregular polygons in CSS

Question

Hi,

I'm wondering how to go about marking up and coding hover effects for a map similar to this image.

When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries on each section must be representative of the image and shouldn't be squares. The solution can't use canvas since the site I'm working on has to be usable in older browsers (I'm gutted, personally.)

Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?

Edit: I know people are suggesting the tag, but AFAIK, it doesn't accept the :hover pseudo class.

Edit 2: I might use this: http://www.netzgesta.de/mapper/

Answer 1

You can use HTML <area> Tag

Answer 2

Another self answer...

A few months ago I came across a library called Raphael JS - http://raphaeljs.com/. For those of you unfamiliar with it, it's an SVG DOM library first and foremost. If you know a thing or two about SVG, you'll know that IE doesn't support it, but it does support VML. Raphael caters for this as well. Awesome, right?

Anyway, I ended up saving the AI file for the map as an SVG file and importing the paths into a JSON block, basically doing the same thing as this code: http://raphaeljs.com/australia.html

The only issue I came across:

• I wanted the map background to be transparent. Setting fill to transparent whilst allowing the section to accept mouseover worked in Firefox, but in IE, it failed. I instead opted for filling the path with white, then setting the opacity to 0.01. After that I duplicated the path and didn't fill it to create the border.