이미지 맵에서 jquery maphilight 영역을 비 힐링 처리합니다.

Question

이제 몇 시간 동안 고생했습니다. 나는 이미지 맵을 가지고 있으며 jQuery Maphilight 플러그인을 사용하여 이미지 맵의 다른 영역을 강조 표시합니다.

플러그인이 제대로 작동하지만 활성 영역 강조 표시를 찾을 수 없습니다. 캔버스 지우기를 시도했습니다.

마크 업 :

<img src="someImage" usemap="#levelMap" id="floorplan" /> 
<map name="levelMap"> 
    <area id="area1" shape="poly" coords="316,56,334,56"> 
    <area id="area2" shape="poly" coords="460,84,537,85"> 
</map> 

코드 :

$('area').eq(0).attr('data-maphilight','{"fillColor":"000000","alwaysOn":true}' 
$('#floorplate').maphilight(); 

이 예상대로 첫 번째 영역을 강조한다. 이제는 두 번째 영역이 첫 번째 영역이 아니라 첫 번째 영역이 활성 상태임을 나타내는 사용자 지정 이벤트를 듣고 있습니다. 이 시점에서,

$('area').removeAttr('data-maphilight'); // Remove the attribute from all area elements. 
$('area').eq(1).attr('data-maphilight','{"fillColor":"000000","alwaysOn":true}' // Add attribute for the next area. 
$('#floorplate').maphilight(); // Call the plugin again to execute on the latest active area. 

위 하이라이트에게 새로운 영역을 수행하지만이 maphilight 속성이없는 경우에도 이전 제거되지 않습니다. 나는 전체 '맵'요소를 제거하고 다시 추가하려고 시도했지만 플러그인은 상태를 저장하는 것으로 보입니다.

그래서 최종 결과물은 슬라이드 쇼와 유사한 이미지 맵입니다. 하나의 지역은 고사하고 다음 지역으로 이동합니다.

아이디어가 있으십니까?

Answer 1

나는 이것이 당신이 찾고있는 것이라고 생각합니다. 예를 들어, 당신은, 당신이 할 수있는 "유엔 - hilight"area1 좋아하면 : http://davidlynch.org/projects/maphilight/docs/demo_simple.html :

$('area#area1').unbind('.maphilight'); 

내가 mahilight의 예제 페이지에 시도 것과 유사합니다. 일단 콘솔에 다음을 실행 해보십시오 :

$('area:eq(1)').unbind('.maphilight'); 

Answer 2

나는 또한 같은 문제로 어려움을 겪고있었습니다. 내가 한 것은 이미지와지도 요소를 별도의 div에 싸서 maphilight를 적용하고 문제를 해결했습니다.

<div id='image'> <image src='yourimage' class='mapclass' usemap='#mymap'></div> 

다음 <map> 태그로

<div id='map'> <map name='mymap'> <area></area> </map> </div> 

다음 $('.mapclass').maphilight() 그것이