ImageMap的外坐标

Question

我有一个像下面的图像地图，一个地方在另一个地方，如下：

如何在不选择内部的情况下获取外部坐标。我正在使用此Link来获取地图的坐标。

（即我需要在三个区域上徘徊时才能获得UpperHanover的坐标，它不应显示Upperhanover。）

我想要获取外部区域的坐标而不选择内部区域，如下所示。

根据下面的建议答案我得到的图像映射如下：但我不想看到边界线。

很抱歉我的解释不好。请询问您是否无法理解。

Answer 1

我会尝试使用＆＃34; poly＆＃34;包围白色区域的形状区域。

<img src="https://www.google.de/images/srpr/logo11w.png" usemap="#example"/>
<map name="example">
  <area shape="poly" coords="0,0, 280,0, 280,50, 250,50, 250,150, 320,150, 320,50, 280,50, 280,0, 538,0, 538,190, 0,190" alt="clickable area" href="javascript:alert('Click!')">
</map>

我创建了一个JSFiddle作为示例。黄色＆＃34; o＆＃34;其余部分时，徽标不可点击。 http://jsfiddle.net/pXth7/

我希望我能正确理解你的问题。

修改：我没理解。显然，您希望使用某些库或其他库可见可点击区域。我能想到的唯一解决方案是：http://jsfiddle.net/X4mPW/10/

Answer 2

您可以为单个地图创建两个单独的形状：

<img src="EFPvH.png" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="30, 126, 19, 56, 80, 52, 103, 68, 106, 62, 127, 75, 145, 74, 176, 96, 174, 71, 188, 71, 188, 142, 93, 145, 91, 120" />
    <area shape="poly" coords="16, 7, 185, 9, 188, 67, 178, 67, 173, 65, 148, 64, 123, 49, 91, 37, 83, 53, 22, 55" />
</map>

第一个形状覆盖上汉诺威上部，第二个形状覆盖下汉诺威上部。

Answer 3

查看我已将链接1指向整个徽标的链接，并将链接2指向红色＆＃39; O＆＃39;

http://jsfiddle.net/pXth7/1/

<img src="https://www.google.de/images/srpr/logo11w.png" usemap="#Map"/>
<map name="Map"><area shape="circle" coords="179,97,60" href="javascript:alert('Click 1')">
  <area shape="rect" coords="42,16,472,167" href="javascript:alert('Click 2')" >
</map>
</map>

Answer 4

据你所说，我的印象是

1. 您希望在悬停UpperHanover（区域的坐标？）时看到信息，但是当您将鼠标悬停在较小的内部区域时则不会看到信息。
2. 单击该区域时，您不希望在该区域周围看到对焦线。

我已经将icke的JSFiddle分开来解决这两个问题：http://jsfiddle.net/ACjBQ/1/

通过向title标记添加<area>属性以及您想要的内容来解决

（1。）。我刚刚复制了coords属性的值，但您可以替换您选择的任何文本。 （2.）通过添加一些JQuery代码来解决，一旦你点击它就会突出显示该区域。

请告诉我们这是否符合您的目的。

Answer 5

图像地图并不是真正用于着色，但这是你要找的吗？ http://jsfiddle.net/me2loveit2/X4mPW/8/

<area shape="rect" coords="240,45,330,140" alt="UPPER HANOVER TOWNSHIP">
  <area shape="rect" coords="0,0,538,190" alt="UPPER HANOVER TOWNSHIP" href="javascript:alert('Click!')">