如何可视化/调试图像？

Question

我正在动态生成图表工具的图片。

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

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

Answer 1

如何使用JavaScript（和jQuery）来测试它？

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

这个插件将突出图像映射区域。

Answer 2

从来没有想过我会这么说，但这是少数Dreamweaver可能有用的情况之一。您将拥有一个界面，您将可以使用锚点并轻松设置您的图像地图。

Answer 3

您可以使用FireBug为：

• 右键单击图片，然后选择“检查元素与萤火虫”
• 在Firebug中的HTML标签，该image标签被突出显示：找到并展开相关map标签，这通常是后马上
• 现在，您可以将鼠标移动到每个area标签，看看他们强调在你的图像

Answer 4

Image Map Editor是Firefox的插件。这是迄今为止我发现的最佳工具，使得创建，检查和编辑图像映射变得非常简单。

Answer 5

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

此解决方案不幸在Firefox中不起作用。