jQuery ImageMapster : 강조 표시

Question

ImageMapster가 내지도 영역을 강조 표시하는 데 문제가 있습니다. 설명서를 읽으면서 나는 단순히 $ ('img')를 사용한다는 인상을 받았습니다. mapster(); 나는 마우스로지도 영역 강조 표시를 볼 수 있어야합니다.

나는 이런 일이 발생하지 않을 것입니다. 영역을 선택할 수는 있지만 마우스 오버는 아닙니다.

그러나 맵 영역에 onMouseOver 및 onMouseOut 특성을 넣으면 강조 기능이 작동하도록 만들 수 있습니다.

내 문제의 핵심은 다음과 같습니다. ImageMapster를 동적 인 C# 코드와 통합하려고 할 때지도 영역에 onMouseOver 및 onMouseOut 특성을 추가 할 수 없습니다. C# 개체 WebControls.CircleHotSpot은 보이는 것처럼 사용자 지정 특성을 지원하지 않습니다.

1. 가 어떻게 ImageMapster 코드 만 작동하도록 강조 영역지도를 얻을 수 있습니다 :

   그래서 제 질문은 두 가지이다?

2. C# 개체 WebControls.CircleHotSpot에 특성을 추가하는 방법이 있습니까?

다음은 현재 사용하고있는 자바 스크립트 및 HTML 마크 업입니다.

자바 스크립트 :

$(document).ready(
    function() 
    { 
     $('#Image1').mapster({ 
      fillOpacity: 0.5, 
      mapKey: 'alt', 
      staticState:true, 
      render_highlight: 
      { 
       fillColor: '2aff00', 
      }, 
      render_select: 
      { 
       fillColor: 'ff000c', 
      } 
     }); 

     $('#Image2').mapster({ 
      mapKey: 'alt', 

      stroke: true, 
      strokeOpacity: 1.0, 
      strokeColor: '000000', 
      strokeWidth: 2, 

      fill: true, 
      fillColor: '0000ff', 
      fillOpacity: 0.25, 

      render_select: 
      { 
       fillOpacity: 0.75, 
       fillColor: 'ff0000' 
      }, 
      render_highlight: 
      { 
       fillOpacity: 0.5, 
       fillColor: '00ff00' 
      } 
     }) 
    } 
); 

마크 업 :

<img id="Image1" src="bicycleparts.png" usemap="#ImageMap1" /> 

<map name="ImageMap1" id="ImageMap1"> 
    <area shape="circle" coords="100,50,50" href="" title="1" alt="1" onMouseOver="$('#Image1').mapster('highlight','1')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
    <area shape="circle" coords="200,100,50" href="" title="2" alt="2" onMouseOver="$('#Image1').mapster('highlight','2')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
    <area shape="circle" coords="300,150,50" href="" title="3" alt="3" onMouseOver="$('#Image1').mapster('highlight','3')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
    <area shape="circle" coords="400,200,50" href="" title="4" alt="4" onMouseOver="$('#Image1').mapster('highlight','4')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
    <area shape="circle" coords="500,250,50" href="" title="5" alt="5" onMouseOver="$('#Image1').mapster('highlight','5')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
</map> 

<img id="Image2" src="bicycleparts.png" usemap="#ImageMap2" /> 

<map name="ImageMap2" id="ImageMap2"> 
    <area shape="circle" coords="100,50,50" href="" title="1" alt="1"/> 
    <area shape="circle" coords="200,100,50" href="" title="2" alt="2"/> 
    <area shape="circle" coords="300,150,50" href="" title="3" alt="3"/> 
    <area shape="circle" coords="400,200,50" href="" title="4" alt="4"/> 
    <area shape="circle" coords="500,250,50" href="" title="5" alt="5"/> 
</map> 

Answer 1

이에 대한 해결책은 HREF가 비어 있지 있는지 확인하는 것입니다. 내 경우에 href = "#"으로 설정하면 ImageMapster가 올바르게 작동합니다 - 태그에서 mouseover/mouseout 기능없이 강조 표시됩니다.

이제 C#의 경우 CircleHotSpot.NavigateURL = "#"을 사용하여 프로그래밍 방식으로 내 솔루션을 해결할 수 있습니다.

해결 방법에 대한 감사합니다.