JQuery maphighlight는 조건에 따라 영역 강조 색상을 변경합니다.

Question

지도 좌표를 사용하여 이미지 맵을 만들었으므로 잘 작동하지만 강조 표시가 필요하지만 강조 표시 색상을 변경하려면 조건에 따라 다릅니다. ... 첫 번째 condtion에서 붉은 색 영역을 강조 표시 한 다음 동일한 영역이 두 번째 조건에 대한 검은 색으로 강조 표시됩니다. 동일한 영역을 강조 표시 할 수 있지만 동시에 영역 색상을 변경할 수 없습니다. 여기에 바이올린에

는

내 샘플 코드 : Fiddle Demo

내가

<script> 
     $(document).ready(function() //on page load 
     { 
      $('area[title*="UPPER"]').each(function()//get all areas 
      { 
       $(this).addClass("victory"); 
      }); 

      $('area[title*="LOWER"]').each(function()//get all areas 
      { 
       $(this).addClass("lose"); 
      }); 

      //initialize highlight 
      $('.map').maphilight({ strokeWidth: 0, fillColor: "0000FF", fillOpacity: 0.8, singleSelect: true }); 

      ////map wrap 
      $(".victory").click(function() {     
       //This block is what creates highlighting by trigger the "alwaysOn", 
       var data = $(this).data('maphilight') || {}; 
       data.alwaysOn = !data.alwaysOn; 
       $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
       //there is also "neverOn" in the docs, but not sure how to get it to work 
      }); 

      $('.map').maphilight({ strokeWidth: 0, fillColor: "FFFF00", fillOpacity: 0.8}); 

      $(".lose").click(function() {     
       //This block is what creates highlighting by trigger the "alwaysOn", 
       var data = $(this).data('maphilight') || {}; 
       data.alwaysOn = !data.alwaysOn; 
       $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
       //there is also "neverOn" in the docs, but not sure how to get it to work 
      }); 
     }); 
    </script> 

Fiddle Demo

하지만 두 번째 fillcolor.any 하나의 도움으로 첫하고 fillColor을 덮어이다 사용하여 시도했다 이 문제를 해결하려면 area.style하지 background-color 속성을 가지고 있기 때문에

Answer 1

귀하의 코드가 작동하지 않습니다 확인. 또한 title을 area 초로 설정하지 않았다면 대신 alt 초가있는 것 같습니다.

사용 된 plug-in은 이미지에 지나치게 캔버스 요소를 만들고 강조 색상은 그 캔버스의 부분적으로 투명하지 않은 부분임을 유의하십시오. 지도의 특정 부분을 노란색으로 표시하려면 이미지 자체를 변경하거나 나중에 숨길 수있는 예를 들어 오버레이 된 이미지를 사용해야합니다. 와 어쨌든

, 플러그인이 같은 작업을 수행 할 수 있습니다

$(function() { 
    var data = {}; 
    $('.map').maphilight(); 
    data.alwaysOn = true; 
    data.fillColor = 'ffff00'; 
    data.fillOpacity = '0.6'; 
    $('area[alt="UPPER HANOVER TOWNSHIP"]').data('maphilight', data).trigger('alwaysOn.maphilight'); 
}); 

A live demo at jsFiddle.

Answer 2

작업 코드는 다음과 같습니다,이

 $(document).ready(function() //on page load 
{ 
    $('area').each(function()//get all areas 
       { 
        var co=$(this).attr('coords');//get coords by attr from area 
        alert(co); //alert coords in alertbox 
       }); 
});