Hover effects on irregular polygons in CSS

Question

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 <area> tag, but AFAIK, it doesn't accept the :hover pseudo class.

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

Potpourri

Old post, but you might want to have a look at this: alistapart.com/d/sprites/ala-blobs2.html – Bibliophile

Answer 1

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.

Potpourri

Hey @WillMorgan this looks cool, but I'm not seeing where you converted the SVG into a JSON block for use by raphael. I see where you declared var mapPaths= in FMAC.js, but how did you get that? Did you just convert the xml SVG data straight to JSON? (I'm obviously displaying my SVG noobness, but I think others will have the same quesiton). – Cellaret

Others will have the same *question. Stupid not being able to edit comments. – Cellaret

Looks like there's a PHP technique floating around out there, which I should be able to use : bkp.ee/atirip/convert-svg-into-raphael – Cellaret

I see what you did now, using jQuery to get the svg and loop through it as an xml document. For others coming here, that's in the minified code beneath there. I'm working on an example now, I'll hopefully be able to put it up as a jsfiddle at some point. – Cellaret

Well, I guess to a degree this only works if the data is just an SVG map path, but that's the only way I can see you'd draw an irregular polygon in SVG... – Potpourri

Answer 2

You can use HTML <area> Tag

Fulfil

You're right. Unfortunately I think you can't do cross-browser solution with pure CSS+HTML without using javascript. :hover pseudoclass will work only with modern browser, but not in IE < 9. – Fulfil

Answer 3

If you use jQuery you can use the maphilight plugin. documented at http://davidlynch.org/projects/maphilight/docs/ and available from github at https://github.com/kemayo/maphilight

Ringtail

Answer 4

I see what the problem here is: making let's say a world map the usual way is quite a load. If I get it right, what you want is to have a territory map image and put hover effects making hover area match country borders exactly. SVG can be used for the map (the drawing part is already done) but the problem is how to generate HTML area map using SVG map coordinates. There's a solution (I've tried it, looks good at least with the demo provided) which translates SVG into Raphael (generates the coords) using PHP. But again you need raphael.js for that... well if you change your mind: https://github.com/atirip/svg2raphael. And if you're not familiar with Raphael it will take a time to get used to it, documentation is not so good -for me-.

Edit: I can confirm that translation from SVG->rapahel.js works but SVG files needs some tweaks. For what I see in the example SVG provided in svg2raphael the files were made with Adobe Illustrator. I've tried with SVG (plain) from Inkscape and it didn't work properly, but I could manage to fix the issues, for example:

1. svg2raphael won't translate Inkscape generated <path style="fill:#ff0000" ...></path> (will set fill="none"!!! so the result is invisible, but will translate correctly <path fill="#ff0000" ...></path> Seems like it will ignore everything inside style="".
2. svg2raphael misreads the alignments from Inkscape SVG, so you need to either move the illustration inside Inkscape or edit the SVG file with text editor and change the M value to M0,0.
3. svg2raphael can translate multiple svg elements, but looks at the main tag which Inkscape generates to align groups of illustrations, sometimes the whole illustration moves away from the render area and you see nothing. Hope this helps!

Edit 2: You can use Inkscape's style="" for creating CSS rules to apply to the SVG, that works great ang keeps style outside SVG/Raphael!

Fluorinate

I understand, so what you need maybe is get an SVG of the map you need and use a tool that translates SVG path coords to HTML area map coords and then use that HTML code for a PNG version of the previous SVG. – Fluorinate