HTML Image map with selectable regions triggering popup content

Question

It has been a long time since I have had to do Image Mapping! Probably like 4-5 years.

The last time I achieved this using the tag and creating tags for polygonal shapes. This of course works, and is still supported html, even in HTML5. Question is though, is this still a good way to go for image mapping? Or should i scrap this direction and aim to use Canvas or SVG techniques instead?

There are a couple of factors in regards to the decision:

• The client uses IE7, so the solution has to work with IE7 and IE8, hence me thinking not to use SVG or Canvas, it would be easier I guess to use the old school map tag, at least it will easily work across all platforms.
• The Map has quite custom styles (strokes around the areas with a margin gap too)
• Each area has a rollover state, with a popup with content unique for each region. This will have to be achieved with JS. Are there any issues using JS to interact with the DOM structure of the map using map tag?
• It's not essential, but I would to make the map somewhat responsive to the viewport.

Using the tag frankly feels really old school, dated and dirty. But, to be honest for my case, it seems like the most suited solution. What does everyone think?

Any feedback welcome,

Thanks, Craig

Answer 1

For your requirements I think best suite is SVG. By some work around you can make use of all time favorite jQuery with SVG and build cool stuff so quickly. I was able to develope a ticket booking tool on theaters with SVG maps within two weeks.

Also now every one needs every thing on mobile and it works on mobile with just no efforts.

Try to convince client to upgrade IE, that will be best for you. All the best.