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

svg mapping imagemap jquery-svg
mindtheGaspar picture mindtheGaspar · Jun 28, 2012 · Viewed 135.9k times · Source

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:

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

Jamie Treworgy picture Jamie Treworgy · Jun 29, 2012

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

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

Disclosure: I wrote it.

Related questions

Interactive World Map, highlight countries on mouseover

I need to create an interactive world map on the front page of a site, the view portal will be about 650x200 pixels. The interactivity would include the following, mouse-over a country would highlight (the countries are will literally be …

Read More
How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More
How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are …

Read More