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

【问题标题】：Change title attribute of different polygons in an image map更改图像映射中不同多边形的标题属性
【发布时间】：2012-11-27 19:01:01
【问题描述】：

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

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

<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 中插入自定义工具提示，作为地图每个多边形区域的标题属性。

【问题讨论】：

标签： javascript html css tooltip imagemap

【解决方案1】：

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

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

见：Get position of map area(html)?

【讨论】：

这不是我要求的......再次，我想要做的是用定制的工具提示替换图片的正常标题属性。
如果没有这个，你将如何弄清楚如何定位它？
是的，我很抱歉，工具提示的 CSS 已经制作好了，并且是 'position: absolute'