javascript - 更改图像映射中不同多边形的标题属性

Question

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

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

<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>

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

Answer 1

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

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

参见:Get position of map area(html)?