У меня есть это изображение, которое я нанес на карту. Он имеет много областей в форме многоугольников, и при наведении курсора область окрашивается (под цветным я подразумеваю другое изображение). Я также сделал специальную всплывающую подсказку, чтобы при наведении на нее отображалось текстовое поле с информацией, которая растягивается более чем на одну строку.
Проблема в том, что я не могу понять, как смешать эти два вместе. Вот код на данный момент:
<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 карты в качестве атрибута заголовка для каждой полигональной области карты.
