4

我有这张我已经映射的图像。它有许多多边形形状的区域，并且在悬停时该区域会被着色（并且着色是指另一张图片）。我还制作了一个自定义工具提示，以便在悬停时显示一个文本框，其中包含超过一行的信息。

问题是我无法理解如何将这两者混合在一起。这是到目前为止的代码：

<div style="text-align:center; width:450px; margin-left:auto; "> <img id="Image-           Maps_4201211181157353" src="...Original.png" usemap="#Image-Maps_4201211181157353" border="0" width="450" height="321" alt="" title=""  /> <map id="_Image-Maps_4201211181157353" name="Image-Maps_4201211181157353">

<!--Area1--> <area shape="poly"coords="370,191,363,195,355,194,343,193,339,185,330,173,327,164,325,154,338,149,351,149,364,149,365,165,364,181," href=" " alt=""  id="1" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211181157353').src= '...Area1.png';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211181157353').src= '...Original.png';" /> </map>

其中 Original.png 是原始图片，Area1.png 是鼠标悬停时改变颜色的区域。

这是工具提示类：

<a class="tooltip" href="#"> Tooltip
  <span class="custom warning">
       <em>Title</em>Example text
  </span> </a>

所以我想要在地图 div 中插入定制的工具提示，作为地图每个多边形区域的标题属性。

4

1 回答 1

2

您需要做的是遍历每个区域的坐标并找到顶部/左侧或中心，然后使用 JavaScript 相应地设置工具提示的位置position:absolute。矩形很容易，但多边形需要更多的工作。

确实没有简单的方法可以做到这一点。

请参阅：获取地图区域的位置（html）？

于 2012-11-27T19:13:45.017 回答