이미지 맵에서 여러 영역을 동시에 강조 표시하는 방법

Question

David Lynch's fabulous MapHighlight plugin 미국지도의 맞춤 버전과 함께 사용하고 있습니다. 불행하게도 일부 미국 주 (로드 아일랜드 같은)는 극히 적습니다. 이런 이유로, 저는이 작은 국가 중 일부에 대한 약어가있는 상자 오른쪽에지도를 만들었습니다.

사용자가 상자 나 상태를 가리키면 동시에 상자와지도가 강조 표시됩니다.

<area href="#" title="RI" shape="poly" coords="617,141, 617,138, 617,135, 616,131, 620,130, 621,131, 623,133, 625,136, 623,138, 622,137, 622,139, 620,140, 617,141, 617,141"/> 
<area href="#" title="RI" shape="rect" coords="728,164,760,182"/> 

두 항목이 같은 시간 제목을 공유합니다. (예 : Rhode Island의 제목 태그는 "RI"입니다.)

David Lynch 사이트의 샘플을 기반으로 다음과 같이하는 것이 도움이 될 것이라고 생각했습니다.

$('area[title]').mouseover(function() { 
    $(this).mouseover();  
}); 

불행히도,이 작동하지 않았다 이벤트 화재를 보였다 결코 - 나는 변화의 숫자를 시도에도 불구하고.

이러한 요소를 일반적인 방법으로 동기화하고 마우스 오버/마우스 오버시 모든 강조 표시에 동일한 제목의 모든 영역 태그를 포함하려면 어떻게해야합니까?

Answer 1

보십시오

가

$('area').mouseover(function() { 
    $('area[title="'+$(this).attr('title')+'"]').mouseover(); 
}); 

이 모든 area 요소의 mouseover 이벤트를 처리 한 후 동일한 제목과 일치하는 모든 분야에

Answer 2

시도의 ImageMapster를 mouseover 이벤트를 트리거 title 속성을 사용 http://www.outsharked.com/imagemapster을

기본 동작은 원하는대로 수행해야합니다 (데모 페이지 - 첫 번째 예는 USA 맵입니다). 바이올린에서

: http://jsfiddle.net/juvyh/

Answer 3

내가 그러나 this SO question에서 설명한 바와 같이,이 오래된 질문입니다 알고 있어요 :
maphilight 함수는 GROUPBY 기능이 있습니다. 귀하의 경우에는이 같은 것을 할 수있는 :

$('.mapimage').maphilight({ groupBy: 'title' }); 

을 어느 것이다 지역의 제목별로 그룹 (이 지역의 모든 속성을 선택할 수있다).