how to visualise/debug an imagemap?

Question

I'm dynamically generating an imagemap for a chart tool I have.

I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not possible.

So whats the easiest way to check my image map is correct? Are there any browser tools which will "visualise" the areas?

Answer 1

What about using JavaScript (and jQuery) to test it?

http://davidlynch.org/js/maphilight/docs/demo_usa.html

This plugin will highlight image map areas.

Answer 2

You can use FireBug for that:

• Right-click your image and choose "Inspect Element with FireBug"
• In the HTML tab of Firebug, the image tag is highlighted: locate and expand the associated map tag, which usually is right after it
• You can now place your mouse over each area tags to see them highlighted over your image

Answer 3

One way to visualize an area tag in Chrome is to add a tabindex to the area tag(s) you want to see, and then click or tab to it. Chrome will nicely highlight the actual outline of the clickable area.

This solution unfortunately doesn't work in Firefox.

Answer 4

Image Map Editor is a plug-in for Firefox. It is the best tool I have found so far, makes creating, inspecting, and editing image maps very easy.