你如何使图像在图像的不同区域中以HTML格式点击并导致不同的URL ...例如我有一个图像或"按钮"如果你将是1图像但我希望它实际上是2链接...按钮的一侧是"注册"而另一侧是"试用"
我可以将 SVG 图像路径转换为图像地图坐标吗？
让我们假设我有这个 SVG 图像
http://www.openclipart.org/people/ArtFavor/anatomy26.svg
我想以某种方式将 SVG 中的路径转换为 Imagemap 坐标，以便我可以制作效果/脚本 http://www.netzgesta.de/mapper/在上面！！
这意味着当我在解剖结构的特定部分滚动时，我想制作高光效果（要使用的脚本不必是“映射器”，但我只是将其作为示例）
有没有办法围绕一个边界<area>？
我需要这样做来测试一个imagemap,但这不起作用:
area {
outline: 1px solid red;
border: 1px solid red;
}
我有一个图像(图像是建筑物的平面图),图像包含可以打开或保留的各种房间.我使用了Imagemap和热点来绘制房间的坐标,我正在处理onclick事件以完成我需要它们完成的任务.问题是,一旦保留房间,我怎样才能为热点的坐标着色？我跟踪我的数据库中的预留房间,因此知道保留哪个房间不是问题,但问题是热点没有颜色属性.最好的方法是什么？JavaScript的？
我知道我可以在点击和诸如此类的东西上交换图像,但是有数百个房间,并且对于预留/非预留房间的每种可能性而言,拥有那么多图像将是浪费时间.
我试图从Adobe Illustrator中的路径中找到percise坐标以在HTML图像映射中使用,有人建议我将路径保存为SVG文件,但是当我在记事本中打开SVG时,我得到以下内容:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="300.96px" height="248.16px" viewBox="0 0 300.96 248.16" enable-background="new 0 0 300.96 248.16" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M81.6,152.64c7.519,0,15.041,0,22.56,0
c-0.64,2.88-1.28,5.76-1.92,8.64c-0.16,2.4-0.32,4.8-0.48,7.2c-0.16,0-0.32,0-0.48,0c0,2.56,0,5.121,0,7.68
c-0.659,2.333,0.264,6.49-0.48,9.12c-0.16,0-0.32,0-0.48,0c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0
c-0.584,2.076,0.248,5.349,0.48,6.72c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0c-0.364,1.869,0.809,1.523,0.96,1.92
c0.56,1.47-0.759,3.551-0.96,4.32c0.16,1.12,0.32,2.24,0.48,3.36c0.16,0,0.32,0,0.48,0c0.488,1.604-0.283,3.241-0.48,4.32
c-0.96-0.16-1.92-0.32-2.88-0.48c-0.48,1.44-0.96,2.88-1.44,4.32c0,0.8,0,1.6,0,2.4c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36
c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36c-0.16,0-0.32,0-0.48,0c0.16,2.24,0.32,4.48,0.48,6.72c-0.16,0-0.32,0-0.48,0
c0,0.64,0,1.28,0,1.92c-0.16,0-0.32,0-0.48,0c0,0.32,0,0.64,0,0.96c-0.32,0.16-0.64,0.32-0.96,0.48c0,0.32,0,0.64,0,0.96
c-0.32,0.16-0.64,0.32-0.96,0.48c-0.451,1.146,1.519,3.296,0,4.32c-0.32,0-0.64,0-0.96,0c-1.875,2.142-4.972,1.148-7.2,0.48
c-2.72,0-5.44,0-8.16,0c-0.933-1.886-1.007-2.403-3.84-2.4c0-0.48,0-0.96,0-1.44c1.326-0.347,1.074-0.134,1.44-1.44
c0.16,0,0.32,0,0.48,0c0-0.64,0-1.28,0-1.92c0.16,0,0.32,0,0.48,0c0.32-1.76,0.64-3.52,0.96-5.28c-0.48-0.16-0.96-0.32-1.44-0.48
c-0.16-0.8-0.32-1.6-0.48-2.4c-1.045-0.202-1.367-0.318-1.92-0.96c1.975-1.655,1.015-4.196,1.92-6.72c2.88-0.64,5.76-1.28,8.64-1.92
c0.633-2.939,2.051-6.325,2.88-9.12c0.455-1.531-0.247-3.995-0.48-4.8c-0.32-3.199-0.64-6.4-0.96-9.6c0-1.027,0.48-0.96,0.48-0.96
c-0.16-5.6-0.32-11.201-0.48-16.8c0-2.879,0-5.76,0-8.64c-0.16,0-0.32,0-0.48,0c0-1.6,0-3.2,0-4.8c-0.16,0-0.32,0-0.48,0
c0-1.76,0-3.52,0-5.28C81.954,157.702,81.619,155.542,81.6,152.64z"/>
</svg>
有人可以告诉我如何从这个XML数据中提取坐标,以便我可以将它们与HTML图像映射一起使用吗？我显然没有解析XML文件的经验,我不知道从哪里开始准备脚本这样做.
提前致谢!
我试图在python中生成图形的可点击图像.我首先直接调用了graphviz,然后发现了networkx http://networkx.lanl.gov.
我希望我的程序获取有关用户单击图形的(x,y)坐标处显示哪个节点的信息.我想我可以使用打开的pyplot窗口并显示图形,使用鼠标单击时的(x,y)坐标,但我需要某种图像映射来知道哪个节点已在该坐标处可视化!
你能告诉我是否/如何做到这一点？
我有一个定义了多个区域的图像地图，全部为多边形
我想计算从图像上的一个点（通常由用户点击图像给出）到给定区域外边缘的闭合点的距离。
对于我的情况，可以假设多边形的边都不相交，从而使任务更容易一些
检测点是在区域/多边形的内部、之上还是外部也很有趣，例如，如果点在多边形内部，则距离为负，如果点在边缘上，则距离为 0。
但这对我来说并不重要，因为鉴于用户单击图像给出了该点，因此很容易检测到这一点。
这里给出了这个问题的通用解决方案- 但我想知道是否有人已经在 javascript 中实现了使用图像映射和区域解决这个问题
我想做类似的事情：
var distance = calculateDistancePointToArea( xCoord, yCoord, areaId );
如果这适用于一个区域的所有可能的形状，那将是一个额外的奖励：矩形、圆形和多边形
我怎么可以添加<area>一个内<a>标签的图像映射的内部<map>,仍然有Firefox的显示影像地图？
如果我这样做:
<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/>
<map name="progress">
<a href="http://yourmillionpixels.com/wp-content/uploads/2015/07/20000-goal.jpg">
<area shape="rect" coords="152,648,308,673" target="_self"/></a>
</map>
Firefox会忽略整体<map>,但Chrome不会.我可以做到这样Friefox不会忽视它吗？
我正在使用Wordpress的插件,以便在使用<a>标签时,它会将该图像作为弹出窗口打开,而不是在当前窗口中加载图像
我正在尝试使用<area>和<map>标记使图像的一部分成为链接。但是我不知道如何使映射区域可见以控制它的确切位置（除了观察光标成为指针的位置，但这太繁琐了……）
因此，如果使用以下示例代码，如何使多边形在图像顶部可见，以便更有效地对其进行编辑？
我尝试向class地图和具有CSS中定义的边框的区域添加属性，但这没有用：如果将其添加到<map>标记中，则该属性会显示在图像的外部（在右下角附近），如果我将其添加到<area>，则什么都不会显示。
<img src="mypicture.gif" width="300" height="200" usemap="#mymap1">
<map name="mymap1">
<area shape="poly" coords="120,80,130,70,50,90,120,180,50" href="mylink.html" class="x">
</map>
CSS：
.x {
border: 1px solid red;
}
得到答案后的补充说明：我需要它来编辑链接区域，这些区域不应该一直可见，而且不仅仅在悬停时可见。接受的答案中提到的Firefox插件是完美的-它始终显示区域，甚至允许编辑，添加其他多边形节点等。
我想检测图像不同部分的onClick& onHover。
<img src={physicalimage} id="physicalimage" usemap="#image-map"/>
<map name="image-map">
<area target="" onClick={this.consoleMessage("bpleft")} alt="bpleft" title="bpleft" coords="223,201,269,254" shape="rect" />
<area target="" onClick={this.consoleMessage("bpright")} alt="bpright" title="bpright" coords="60,199,101,259" shape="rect" />
<area target="" onClick={this.consoleMessage("heart")} alt="heartrate" title="heartrate" coords="169,124,219,183" shape="rect" />
</map>我使用反应库来开发我的网站。我无法检测到该onClick事件。还有其他选择吗？