Alternatives to AREA tag when creating Javascript map

Question

I have an extremely large picture of a map. Now I want to create a Map UI where the user can click to highlight regions and also have the functionality to zoom into the map.

Is the AREA tag the only way to go at this problem? My only problem is when I zoom in the map, the will be enlarged and so will the image that it contains, but how would I expand the AREA coordinates according to my zoom level? Is there a good approach for going at this problem?

Answer 1

AREA is the only way to represent polygons, unfortunately. You can read your coordinates from the AREA tag, scale them, and write them back. Rounding overlaps are a pain to deal with though.

One alternative is to use the BING maps API, which allows custom overlays. You need to create an overlay for each zoom level though.

Answer 2

Apply css to AREA MAP

I suggest SVG there, which would also solve your zoom problem. The only complication is that IE8 and below won't support it, and IE9 isn't being pushed through Windows Update to non-beta users yet.

Answer 3

Simple option: ImageMapster figures out most image area map things for you on the fly. IE6+, needs jQuery.

More complex, more powerful option: Raphael.js enables you to create fully controllable fully scalable SVG vector graphics in everything from IE6+ (doesn't need Flash). Bit of a steep learning curve, but it's very powerful.