이미지 맵에서 다른 폴리곤의 제목 속성을 변경합니다.

지도에이 이미지가 있습니다. 그것은 다각형 모양의 많은 지역을 가지고 있으며, 그 지역은 착색되어 있습니다. (그리고 색깔로 다른 그림을 의미합니다.) 마우스를 가져 가면 색상이 표시 될 때 텍스트가 하나 이상의 줄로 늘어나는 정보와 함께 표시되도록 맞춤 툴팁을 만들었습니다.이미지 맵에서 다른 폴리곤의 제목 속성을 변경합니다.

문제는이 두 가지를 어떻게 섞을 지 짐작할 수 없다는 것입니다. Original.png은 원본 사진과 Area1.png는 마우스 오버시 색상을 변경하는 지역이다

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

: 여기에 지금까지 코드입니다.

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

그래서 내가 원하는 것은지도의 각 다각형 영역에 대한 제목 속성으로지도 DIV 내부의 맞춤 제작 도구 설명을 삽입하는 것입니다

는 그리고 이것은 툴팁 클래스입니다.

출처

2012-11-27 Alex M

각 영역의 좌표를 반복하고 상단/왼쪽 또는 가운데를 찾은 다음 JavaScript를 사용하여 position:absolute을 사용하여 툴팁의 위치를 설정하십시오. 직사각형은 쉽지만 다각형은 좀 더 많은 작업이 필요합니다.

정말 쉬운 방법은 없습니다.

참조 : Get position of map area(html)?

출처

2012-11-27 19:13:45

그것은 내가 질문 한 내용을 .... 다시, 내가하고 싶은 것은 사용자 정의 만든 도구 설명과 사진의 정상적인 title 속성을 대체 할 수없는 것. –

그리고 이것 없이는 지구를 어떻게 배치 할 것인지를 어떻게 알게 될까요? –

예, 사과합니다. 툴팁의 CSS는 이미 만들어져 있으며 'position : absolute' –

이미지 맵에서 다른 폴리곤의 제목 속성을 변경합니다.

답변

관련 문제