2012-09-18 1 views
0

동적으로 핫스팟 영역을 만들었으며이 핫스팟 영역의 색을 변경하고 싶습니다. 어떻게이 작업을 수행 할 수 있습니까? 또한 핫스팟 영역의 경계를 표시하려고합니다. 이미지 맵에서 핫스팟 영역의 색을 설정하는 방법

다음은 동적으로

protected void txtall_TextChanged(object sender, EventArgs e) 
{ 
    string[] arr = txtall.Text.Split(','); 
//create hotspot once there are 10 cordinates 
    if (arr.Length == 10) 
    { 
     PolygonHotSpot Polygon1 = new PolygonHotSpot(); 
     Polygon1.Coordinates = arr[0].ToString() + "," + arr[1].ToString() + "," + arr[2].ToString() + "," + arr[3].ToString() 
      + "," + arr[4].ToString() + "," + arr[5].ToString() + "," + arr[6].ToString() + "," + arr[7].ToString() + "," + arr[8].ToString() + "," + arr[9].ToString();// "128,185,335,157,400,224,400,400,228,400"; 

     Polygon1.NavigateUrl="http://www.google.com"; 
     Polygon1.AlternateText = "Southern Region"; 

     ImageMap1.HotSpots.Add(Polygon1); 
    } 
} 

내가 here에서 jQuery를 사용하려 한 C#에서 이미지 맵에서 핫스팟을 만들 수있는 내 코드입니다하지만 난 성공할 수 없습니다입니다. 나는 jquery에 절대적으로 새로운, 나는 단순히 jquery 함수를 붙여 넣기 복사하고 참조를 추가했지만 그것은 나를 위해 작동하지 않았다. 위의 링크에서 붙여 넣기 복사하기 만하면 js 코드를 shw 오전. 누구나 간단한 스타일을 제공하거나 어떤 자바/jquery 함수 그래서 내가 핫스팟 영역에 효과를 볼 수 있습니까?

친절하게 도움을드립니다. 감사합니다.

는 UPDATE .. 코드는 경우 잘 작동 JAVASCRIPT

<script type="text/javascript" src="JS/JScript.js"></script> 
    // 
    <script type="text/javascript" src="JS/jquery.imagemapster.js"></script> 
    <script type="text/javascript"> 
     function point_it(event) { 
      pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft; 
      pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop; 
      document.getElementById("ImageMap1").style.left = (pos_x - 1); 
      document.getElementById("ImageMap1").style.top = (pos_y - 15); 

      document.getElementById("txt1").value = pos_x; 
      document.getElementById("txt2").value = pos_y; 
      if (document.getElementById("txtall").value == "") { 
       document.getElementById("txtall").value = pos_x + "," + pos_y; 
      } 
      else { 
       document.getElementById("txtall").value = document.getElementById("txtall").value + "," + pos_x + "," + pos_y; 
      } 
      var str = document.getElementById("txtall").value; 
      var stringArray = new Array(); 
      stringArray = str.split(","); 
      for (i = 0; i < stringArray.length; i++) { 
       stringArray[i]; 
      } 
      if (i == 10) { 
      //Creates Hotspot Dynamically 
       __doPostBack('txtall ', ''); 

       //Effects to be applied for the hotspot created 
        var image = $('#ImageMap1'); 

    image.mapster(
    { 
     fillOpacity: 0.4, 
     fillColor: "d42e16", 
     stroke: true, 
     strokeColor: "3320FF", 
     strokeOpacity: 0.8, 
     strokeWidth: 4, 
     singleSelect: true, 
     mapKey: 'name', 
     listKey: 'name', 

     areas: [ 
      { 
       fillColor: "ffffff" 
      }, 

      ] 
    });​ 
      } 
      //Clears hotspot 
      if (i >= 10) { 
       __doPostBack('txtall ', ''); 
       str = ""; 
       i = 0; 
       stringArray = []; 
      } 
     } 
    </script> 

ASPX 내가 point_it(event)로 예외가보다 내가 JQuery와 image.mapster을 넣으면

<form name="pointform" runat="server"> 
    <div id="pointer_div" onclick="point_it(event)" style="width: 500px; height: 333px;"> 
     <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/WMap.JPG" Style="width: 500px; 
      height: 333px;"> 
     </asp:ImageMap> 
    </div> 
    <br /> 
    <asp:TextBox ID="txt1" runat="server"></asp:TextBox> 
    <asp:TextBox ID="txt2" runat="server"></asp:TextBox> 
    <br /> 
    <asp:TextBox ID="txtall" runat="server" OnTextChanged="txtall_TextChanged" AutoPostBack="true"></asp:TextBox> 
    </form> 

이 정의되어 내가 jqery를 제거합니다.

답변

0

here을 발견했다. 이제 은 txtall에 대한 포스트 백이 좌표가입니다. 이후이 있습니다. 뒤로다음 색이 지정된 영역이 보입니다!

ScriptCode

<script src="js/jquery-1.7.1.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/imageMapster/jquery.imagemapster.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var image = $('#ImageMap1'); 
     image.mapster({ 
      fillOpacity: 0.4, 
      fillColor: "d42e16", 
      stroke: true, 
      strokeColor: "3320FF", 
      strokeOpacity: 0.8, 
      strokeWidth: 4, 
      singleSelect: true, 
      mapKey: 'shape', 
      listKey: 'shape' 
     }); 

     $("#pointer_div").click(function(event) { 
      pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft; 
      pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop; 
      document.getElementById("ImageMap1").style.left = (pos_x - 1); 
      document.getElementById("ImageMap1").style.top = (pos_y - 15); 

      document.getElementById("txt1").value = pos_x; 
      document.getElementById("txt2").value = pos_y; 
      if (document.getElementById("txtall").value == "") 
       document.getElementById("txtall").value = pos_x + "," + pos_y; 
      else 
       document.getElementById("txtall").value = document.getElementById("txtall").value + "," + pos_x + "," + pos_y; 

      var str = document.getElementById("txtall").value; 
      var stringArray = new Array(); 
      stringArray = str.split(","); 
      for (i = 0; i < stringArray.length; i++) { 
       stringArray[i]; 
      } 
      if (i == 10) 
      { 
       __doPostBack('txtall ', ''); 

      } 
      //Clears hotspot 
      if (i >= 10) { 
       __doPostBack('txtall ', ''); 
       str = ""; 
       i = 0; 
       stringArray = []; 
      } 
     }); 
    });     
</script> 

ASPX 코드

<form id="form1" runat="server"> 
<div> 
    <div id="pointer_div" style="width: 500px; height: 333px;"> 
     <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="pic/usa_map_720.png" Style="width: 500px; 
      height: 333px;"> 
     </asp:ImageMap> 
    </div> 
    <br /> 
    <asp:TextBox ID="txt1" runat="server"></asp:TextBox> 
    <asp:TextBox ID="txt2" runat="server"></asp:TextBox> 
    <br /> 
    <asp:TextBox ID="txtall" runat="server" AutoPostBack="true" OnTextChanged="txtall_TextChanged" Text=""></asp:TextBox> 
</div> 
</form> 

코드 숨김

protected void txtall_TextChanged(object sender, EventArgs e) 
{ 
    string[] arr = txtall.Text.Split(','); 
    //create hotspot once there are 10 cordinates 
    if (arr.Length == 10) 
    { 
     PolygonHotSpot Polygon1 = new PolygonHotSpot(); 
     Polygon1.Coordinates = arr[0].ToString() + "," + arr[1].ToString() + "," + arr[2].ToString() + "," + arr[3].ToString() 
      + "," + arr[4].ToString() + "," + arr[5].ToString() + "," + arr[6].ToString() + "," + arr[7].ToString() + "," + arr[8].ToString() + "," + arr[9].ToString();// "128,185,335,157,400,224,400,400,228,400"; 

     Polygon1.NavigateUrl = "http://www.google.com"; 
     Polygon1.AlternateText = "Southern Region"; 

     ImageMap1.HotSpots.Add(Polygon1); 
    } 
} 
0

이에 대한 JQuery 플러그인을 사용하십시오.

하나는 내가 코드를 가져다가 그것을 편집