tabcontainer에서 div, image 및 jquery 문제를 사용하십시오.

문제는 다음 코드와 관련이 있으며 이유를 파악할 수 없습니까? 코드는tabcontainer에서 div, image 및 jquery 문제를 사용하십시오.

.ASPX

<cc1:TabPanel runat="server" HeaderText="Floor Plan" ID="TabPanelFloorPlan"> 
     <ContentTemplate> 
         <div id="floorplanContainer"> 
         <img id='fplan' src="~/_layouts/card.jpg" usemap="#MyImageMap" /> 
         </div> 
         <map id="MyImageMap" name="MyImageMap"> 
          <area id='roomArea' shape="poly" coords="0,0,0,0" alt="Meeting Room" /> 
         </map> 
         <input id="Submit" type="button" value="Draw" /> 
         <input id="clear" type="button" value="Clear" /> 
     </ContentTemplate> 
    </cc1:TabPanel>

jQuery를

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 

<script src="../../Style Library/Styles/jquery.maphilight.js" type="text/javascript"></script> 
    <script> 
     jQuery(document).ready(function() { 
      var points = ""; 

      $("#floorplanContainer").click(function (e) { 
       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       var pwidth = 2; 
       var pheight = 2; 

       $("#floorplanContainer").append("<div class='point' style='font-size:0;position:absolute; display:inline; border: 1px solid black; top:" + (y - (pheight/2)) + "px; left:" + (x - (pwidth/2)) + "px; width: " + pwidth + "px; height: " + pheight + "px; z-index:100; '> </div>"); 
       if (points != "") points += ','; 
       points += x + "," + y 
      }); 

      $("#clear").click(function() { 

       $('.point').remove(); 
       points = ""; 
       $('#roomArea').attr('coords', '0,0,0,0'); 
       $('#fplan').maphilight({ alwaysOn: false }); 

      }); 

      $("#Submit").click(function() { 

       $('#roomArea').attr('coords', points); 
       $('#fplan').maphilight({ alwaysOn: true }); 

      }); 
     }) 
</script>

문제는 그림에 도시 된 바와 같이이 방법으로 goeas : 포인트는 클릭에 다른 위치에 그려받을 다른 컨테이너와 관련하여 플로팅하는 것처럼 보이고, 영역이 바닥에서 이동하는 것보다 큽니다. 보세요.

enter image description here

나는이 사람이 문제를 밖으로 정렬하는 데 도움이 수 일어나고있는 이유들 알아낼 수 없습니다 무엇입니까?

출처

2012-09-20 Ishan

마우스 이벤트 객체의 jquery clientX 및 clientY 속성을 사용하면 뷰포트 내에서 좌표를 가져와야합니다. 이미지 요소를 컨테이너 요소에 넣는 것이 유용 할 수 있습니다.

마우스 이벤트 객체의 parentX 및 parentY이라는 두 가지 다른 속성이 유용 할 수 있습니다. 화면의 왼쪽 상단 모서리에서 측정 된 좌표를 반환합니다.

EDIT : clientX 및 clientY가 올바른 해결책이 아닐 수 있습니다. 그러나이 답변에는 해결책이있는 것으로 보입니다. jQuery get mouse position within an element

출처

2012-09-23 09:21:14 habsi

tabcontainer에서 div, image 및 jquery 문제를 사용하십시오.

답변

관련 문제