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 be

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

Never thought I would ever say that, but this is one of the few cases where Dreamweaver could be helpful. You'll have an interface, you will be able to work with anchor points and set your imagemap easily.

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.

Answer 5

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