그룹,하지만 단 하나의

Question

이미지 메신저 마크 객실에 강조 표시 :

• 매진
• 판매

각 그룹이 자신의 색깔을 가지고 있기

을 소유. "판매"로 한 방을 가리키면이 그룹 내의 모든 객실이 강조 표시됩니다. 그러나 나는이 것을 강조하고 싶다.

이

는 HTML 코드입니다 :

<img src="" alt="" id="myimagemap" usemap="#imagemap" /> 
<map name="imagemap"> 
<area shape="poly" href="room,1.html" alt="Mieszkanie 01" id="mieszkanie-01" color="red" coords="18,205,18,185,27,185,27,163,86,163,86,126,136,127,137,137,150,137,151,202,79,202,79,206" /> 
<area shape="poly" href="room,2.html" alt="Mieszkanie 02" id="mieszkanie-02" color="red" coords="94,239,94,261,150,261,149,202,78,202,79,238" /> 
<area shape="poly" href="room,3.html" alt="Mieszkanie 03" id="mieszkanie-03" color="red" coords="16,305,150,304,149,260,94,260,94,239,79,239,79,243,24,244,24,229,14,230,14,243,16,243" /> 
</map> 

ImageMapster 코드 :

$('#myimagemap').mapster({ 
    fillColor: 'ff0000', 
    fillOpacity: 0.3, 
    mapKey: 'color', 
    areas: [ 
     { 
      mapKey: 'red', 
      fillColor: '2aff00' 
     } 
    ] 
}); 

색상 = 빨간색 수단이 방은이 방 판매 .... 등입니다 색상 = 녹색 수단을 판매

그래서이 방에서 mouseover로 방의 상태를 확인할 때이 코드는 다른 모든 항목을 color = red로 강조 표시하지만이 방금 강조 표시하려고합니다.

Answer 1

문제 해결 :

$('#myimagemap').mapster({ 
    fillOpacity: 0.3, 
    onMouseover: function(e) { 
     var value = $(this).attr("color"); 
     if(value == 'red'){ 
      $(this).mapster('set',false).mapster('set',true,{ fillColor: 'A4C715' }); 
     } 
     if(value == 'blue'){ 
      $(this).mapster('set',false).mapster('set',true,{ fillColor: '3B517A' }); 
     } 
     if(value == 'green'){ 
      $(this).mapster('set',false).mapster('set',true,{ fillColor: 'E7242A' }); 
     } 
    }, 
    onMouseout: function(e) { 
     $(this).mapster('set',false); 
    } 
}); 

Answer 2

나는이 같은 문제를 통해 발견 만이 답을 찾을 때, 난 단지 imagemapster를 사용하여 내 솔루션을 공유하려는 : & 가능 예약 :

내가이 개 상태를 가지고있다. 그룹화 된 요소 중 하나의 영역 만 가리 키거나 강조 표시하는 핵심은 해당 영역에 다른 고유 한 영역 - 그룹 이름 (여러 개의 영역 그룹 이름을 지정할 수 있음)을 제공하는 것입니다.

내 JS :

var image = $('#imagemap img'); 

image.mapster({ 
    isSelectable: false, 
    fillColor: 'ffffff', 
    fillOpacity: 0.4, 
    mapKey: 'data-key', 
    areas: [{ 
     key: 'available', 
     fillColor: '54C128', 
    }, 
     { 
      key: 'reserved', 
      fillColor: 'CF2B41', 
     } 
    ] 
}); 

내 HTML

<area href="#" data-key="area-1,available" coords="116,105,73,62" shape="rect"> 
<area href="#" data-key="area-2,reserved" coords="73,197,116,237" shape="rect"> 
<area href="#" data-key="area-3,available" coords="75,239,116,279" shape="rect"> 
<area href="#" data-key="area-4,reserved" coords="75,281,116,322" shape="rect"> 
<area href="#" data-key="area-5,reserved" coords="73,323,116,364" shape="rect"> 
<area href="#" data-key="area-6,reserved" coords="64,453,113,505" shape="rect"> 
<area href="#" data-key="area-7,available" coords="63,504,113,554" shape="rect"> 
<area href="#" data-key="area-8,available" coords="65,596,116,646" shape="rect"> 
<area href="#" data-key="area-9,available" coords="66,647,116,697" shape="rect"> 

이제 하나의 영역은 마우스 오버에 강조 표시됩니다이 질문에 어떤 도움을 필요로