如何可视化/调试图像映射？答案

【问题标题】：how to visualise/debug an imagemap?如何可视化/调试图像映射？
【发布时间】：2011-01-01 05:10:24
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

使用 JavaScript（和 jQuery）来测试呢？

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

【讨论】：

【解决方案2】：

您可以为此使用FireBug：

【讨论】：

【解决方案3】：

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

不幸的是，这个解决方案在 Firefox 中不起作用。

【讨论】：

【解决方案4】：

Image Map Editor 是 Firefox 的插件。这是迄今为止我发现的最好的工具，可以非常轻松地创建、检查和编辑图像地图。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：