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.
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.