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

Question

I have this image that I have mapped. It has many regions in the shape of polygons and on hover the region gets colored (and by colored I mean another picture). I have also made a custom tooltip to go with it so that on hover when it is colored a text box appears with info which stretches for more than one line.

The problem is that I cannot fathom how to mix these two together. Here is the code so far:

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

Where Original.png is the original picture and Area1.png is the region that changes color upon mouseover.

And this is the tooltip class:

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

So what I'd like is to insert the custom-made tooltip inside the map div as a title attribute for each polygonal area of the map.

Answer 1

What you need to do is loop through the coordinates of each AREA and find the top/left or center, then using JavaScript set the position of the tooltip using position:absolute accordingly. It's easy for rectangles, but polygons will require a bit more work.

There really is no easy way to do this.

See: Get position of map area(html)?