한 번에 하나의 영역 만 선택하십시오.

Question

나는 영역을 선택하고 싶은 이미지가 있지만, 영역을 클릭하면 "unclicked"해야합니다.

$(document).ready(function() { 
    $(document).mousemove(function(event){ 
     $("#coor").text(event.pageX + ", " + event.pageY); 
    }); 

    $('.map').maphilight({ 
     fillColor: '008800' 
    }); 

    $('.mapping').click(function(e) { 
     $('.mapping').not(this).attr('checked', false); 
     e.preventDefault(); 
     var data = $(this).mouseout().data('maphilight') || {}; 
     data.alwaysOn = !data.alwaysOn; 
     $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
}); 

<div id="links"> 
    <img src="img/hiveplattegrond.png" width="726" height="714" alt="Plattegrond Hive" id="afbeeldingachtergrond" usemap="#hivemap" class="map" s> 
    <map name="hivemap"> 
     <area shape="rect" coords="116,7,190,137" alt="Multimediaruimte" value="Lokaal_Multimedia_01" class="mapping" id="Lokaal_Multimedia_01"> 
     <area shape="rect" coords="187,7,267,73" alt="A105F" value="Lokaal_Studeren_01" class="mapping"> 
     <area shape="rect" coords="187,74, 267,137" alt="A105E" value="Lokaal_Studeren_03" class="mapping"> 
     <area shape="rect" coords="268,7,347,73" alt="lokaalzondernaam" value="Lokaal_Studeren_02" class="mapping"> 
     <area shape="rect" coords="268,74, 347, 137" alt="A105G" value="Lokaal_Studeren_04" class="mapping"> 
     <area shape="rect" coords="572, 445, 650, 523" alt="brainstormruimte" value="Lokaal_Brainstorm_01" class="mapping"> 
     <area shape="rect" coords="311,610,403,705" alt="groepsruimte1" value="Lokaal_Studeren_05" class="mapping"> 
     <area shape="rect" coords="404,610,495,705" alt="groepsruimte2" value="Lokaal_Studeren_06" class="mapping"> 
    </map> 
</div> 

Answer 1

간단히 요소에서 checked 속성을 제거 :

$('.mappings').click(function (e) { 
     $('.mapping').not(this).removeAttr('checked').prop('checked', false); 
     e.preventDefault(); 
     [...] 
}); 

Answer 2

$('.mapping').data('maphilight', { alwaysOn: false }).trigger('alwaysOn.maphilight'); 
$(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');