How to draw a map on a webpage that have links inside some area defined by the map?

Question

I need to put a map in a webpage and I need that when the users clicks on certain area inside city limits on the map the user is redirected.

Wich is the best way without using Flash?

• Define Hover polingons on a image.
• SVG on the browser.
• Some sort of Javascript, jQuery magical plugin out there?
• Google Maps?

And example could be this but It's flash.

Answer 1

Well, for the basic functionality, a good ol' fashioned client side image map (http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.6.1 ) would do the job nicely.

I'm not sure that there's any built-in way to get them to display hover behaviors, though. The cursor will definitely change, but I don't think you can style <area> elements.

With Google maps: what you're looking for is KML (http://code.google.com/apis/kml/documentation/whatiskml.html ).

Answer 2

You could use the HTML map tag.

http://www.w3schools.com/tags/tag_map.asp

Answer 3

You should check this jquery plugin , I think that is exactly what you need

http://plugins.jquery.com/project/maphilight