Create a map with clickable provinces/states using SVG, HTML/CSS, ImageMap

Question

I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.

Example:

• archived: http://www.todospelaeducacao.org.br/

• archived: http://code.google.com/p/svg2imap/

So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.

If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.

Answer 1

jQuery plugin for decorating image maps (highlights, select areas, tooltips):

http://www.outsharked.com/imagemapster/

Disclosure: I wrote it.

Answer 2

Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.

A couple of options if you need something more advanced:

• http://jqvmap.com/
• http://jvectormap.com/
• http://polymaps.org/