blocks|key|5341585|text|使用JavaScript+(和jQuery)来测试它怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5341586|http://davidlynch.org/js/maphilight/docs/demo_usa.html|offset|length|5341587|此插件将突出显示图像地图区域。|5341588|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1I|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

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

<a href="http://davidlynch.org/js/maphilight/docs/demo_usa.html" rel="noreferrer">http://davidlynch.org/js/maphilight/docs/demo_usa.html</a>

This plugin will highlight image map areas.

blocks|key|3229295|text|您可以使用FireBug来实现此目的：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3229296|3229297|右键单击您的图像并选择"Inspect+Element+|unordered-list-item|3229298|+Firebug“|3229299|在Firebug的HTML选项卡中，突出显示image标记:找到并展开关联的map标记，该标记通常紧跟在其后面|style|CODE|3229300|现在可以将鼠标放在每个area标记上，以在图像上突出显示它们<代码>H210<代码>F211|3229301|3229302|entityMap|0|LINK|mutability|MUTABLE|url|https://getfirebug.com/^0|5|7|0|0|0|0|0|M|5|12|3|0|B|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|-4|5|6|7|12|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|13|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|C|$]]|$1|J|3|K|5|G|7|15|8|@$A|16|B|17|L|M]|$A|18|B|19|L|M]]|9|@]|C|$]]|$1|N|3|O|5|G|7|1A|8|@$A|1B|B|1C|L|M]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

You can use <a href="https://getfirebug.com/" rel="noreferrer">FireBug</a> for that:

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

blocks|key|3229418|text|在Chrome中可视化区域标签的一种方法是在想要查看的area标签上添加一个tabindex，然后单击或Tab键定位到它。Chrome会很好地突出显示可点击区域的实际轮廓。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3229419|不幸的是，这个解决方案在Firefox中不起作用。|3229420|entityMap^0|R|4|12|8|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

One way to visualize an area tag in Chrome is to add a <code>tabindex</code> to the <code>area</code> 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.

blocks|key|3229348|text|Image+Map+Editor是火狐的一个插件。这是迄今为止我发现的最好的工具，使创建、检查和编辑图像地图变得非常容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3229349|entityMap|0|LINK|mutability|MUTABLE|url|https://addons.mozilla.org/en-us/firefox/addon/ime/^0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="https://addons.mozilla.org/en-us/firefox/addon/ime/" rel="nofollow">Image Map Editor</a> 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.

blocks|key|2229037|text|从没想过我会这么说，但这是少数几个Dreamweaver能帮上忙的案例之一。您将有一个界面，您将能够使用锚点和设置您的图像地图很容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2229038|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|2229166|text|在Chrome中，你可以选择图像映射的区域，点击左边的三个小点，然后选择“焦点”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2229167|​|2229168|📷|atomic|offset|length|2229169|2229170|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/ca96dd776d7863bcc20c3f73ec937059.png|imageAlt^0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@$G|V|H|W|1|X]]|A|$]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q|R|-4]]]]

In Chrome you can select the area of the image map and click on the three little dots
to the left and then select &quot;focus&quot;
<a href="https://i.stack.imgur.com/orq9J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/orq9J.png" alt="enter image description here" /></a>

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?

how to visualise/debug an imagemap?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在为我拥有的一个图表工具动态生成一个图像地图。我希望能够在区域标签上设置边界或颜色，这样我就可以检查所有生成的内容都是以正确的坐标生成的，但一些研究表明这是不可能的。那么，检查我的图像地图是否正确的最简单方法是什么？有没有什么浏览器工具可以“可视化”这些区域？

问如何可视化/调试imagemap？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何可视化/调试imagemap？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何可视化/调试imagemap？
EN