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>

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

Answer 1

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

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

请参阅：Get position of map area(html)?

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

1 个答案: