如何可视化/调试imagemap？

Question

我正在为我拥有的图表工具动态生成图像映射。

我希望能够在区域标签上设置边框或颜色，以便我可以检查所有内容是否使用正确的坐标进行生成，但是一些研究表明这是不可能的。

那么检查我的图像映射的最简单方法是正确的吗？是否有任何浏览器工具可以“可视化”这些区域？

Answer 1

使用JavaScript（和jQuery）测试它怎么样？

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

此插件将突出显示图像映射区域。

Answer 2

您可以使用FireBug：

• 右键单击您的图像，然后选择＆＃34;使用FireBug＆＃34;
检查元素
• 在Firebug的HTML标签中，突出显示image标记：找到并展开关联的map标记，该标记通常就在其后面
• 您现在可以将鼠标放在每个area标签上，以便在图片上突出显示它们

Answer 3

在Chrome中可视化区域标记的一种方法是向您要查看的tabindex标记添加area，然后点击或标记为该标记。 Chrome会很好地突出显示可点击区域的实际轮廓。

遗憾的是，此解决方案在Firefox中无法使用。

Answer 4

Image Map Editor是Firefox的插件。它是迄今为止我发现的最好的工具，非常容易创建，检查和编辑图像映射。

Answer 5

从未想过我会这么说，但这是Dreamweaver可以提供帮助的少数情况之一。您将拥有一个界面，您将能够使用锚点并轻松设置您的图像映射。

Answer 6

在 Chrome 中，您可以选择图像地图的区域并单击三个小点 向左，然后选择“焦点”