Alternative to using Image-Maps on complex polygons

Question

I have to create a pretty complex map which is divided in pieces, which themselves are each pretty complex polygonal structures. These are given to me as transparent PNGs. Obviously i can't just use the rectangular PNG itself to define each mouse-sensitive area.

First and last thing that came to my mind was using Image-Maps.

But before i go down that road, i wanted to ask whether anyone could think of a more modern solution to this?

Browser support requirements are IE >= 7, FF >= 3, newer Chrome & Opera. So usage of CANVAS might not be an option.

Answer 1

When designing web documents, you should always choose the thing which come closes to expressing your intent, so that your documents are most adaptable to use-cases you didn't think of.

An image map is entirely appropriate for placing links on map images. <canvas> makes your document less interpretable. SVG would be a reasonable choice if it fits your data well, but is less widely implemented than image maps.

Answer 2

SVG would be a good choice, there are plugins to add compatibility for ancient IE versions. There's nothing really wrong with maps, just make sure it's really clear where the links go as the status bar doesn't have the info like a normal link.

Answer 3

IE7 won't do SVG or Canvas (unless you like plugins as Mr. Bradshaw points out), and while VML might work there, it is a quagmire. You could use some javascript to compute point-in-polygon on mousemove. But really, image-maps (either client-side or server-side) will probably be the simplest approach.