ImageMapster - 텍스트 링크를 가리키면 이미지 맵 영역 표시

Question

ImageMapster.js를 사용하여 마우스를 가져 가면 이미지 맵이 나타납니다. 이미지 옆에는 이미지 맵 영역의 특정 영역을 참조하는 텍스트 링크 목록이 있습니다. 텍스트 링크 위로 마우스를 가져 가면 이미지 맵 영역을 강조 표시 할 수 있습니까?

예컨대 :

<img src="map.png" usemap="#ch" style="width:100%;"> 
<map id="usa_image_map" name="usa> 
<area href="http://ab.com" state="ab" shape="poly" coords="259,256,275,257,..."><area href="http://xy.com" state="xy" shape="poly" coords="332,421,329,416,..."> 
</map> 
<div id="links"> 
<a href="http://ab.com">ab</a><a href="http://xy.com">xy</a> 
enter code here 

감사합니다!

Answer 1

이 시도 :

$("a", "#links").hover(
     function() { 
     var state = $(this).text(); 
     $('area[state="' + state +'"]').mapster('select'); 

    }); 

이 당신이 id="links"와 링크 목록을 가져 가면 활성 취득하는 이벤트입니다. var 상태는 마우스가 올려 진 링크의 텍스트를 보유하므로 <a href="ab.com">ab</a>으로 마우스를 가져 가면 상태는 ab입니다. 선택기 $('area[state="' + state +'"]')을 사용하면 상태 링크가있는 링크의 텍스트와 동일한 상태 속성을 가진지도의 영역 요소를 찾을 수 있습니다. mapster('select')은 마침내지도 영역을 강조 표시합니다.