이미지 위로 마우스를 가져 가면 십자형 커서가 x-y 좌표로 표시 될 수 있습니까?

사용자가 클릭 할 수있는 div 안에 이미지가 있습니다.이미지 위로 마우스를 가져 가면 십자형 커서가 x-y 좌표로 표시 될 수 있습니까?

실시간으로 해당 이미지 위로 마우스를 가져 가면 커서의 좌표를 표시 할 수 있습니까? 십자형 커서를 표시하려면 커서 유형을 설정해야합니다 : cursor: crosshair -하지만 어떻게 그 좌표도 표시 할 수 있습니까?

출처

2011-09-23 oxo

http://www.brenz.net/snippets/xy.asp – 472084

난 당신이 뭔가를 찾고 생각 https://codepen.io/mikethedj4/pen/fnizu –

jQuery를 사용하면 수행 할 수 있습니다

<script language="text/javascript"> 
    $('#your_image').mouseover(function(e){ 
     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 
     alert("X: " + x + " Y: " + y); 
    }); 
</script>

출처

2011-09-23 08:29:11

<html> 
<head> 
    <script> 
    function onMouseOver(Sender,e){ 
     var x = e.x - Sender.offsetLeft; 
     var y = e.y - Sender.offsetTop; 
     document.getElementById('coord').innerHTML = x+"-"+y;   
    } 
    </script> 
</head> 
<body> 
    <img src="image.jpg" onmousemove="onMouseOver(this,event)"> 
    <span id='coord'></span> 
</body> 
</html>

출처

2011-09-23 08:32:23

좌표 표시가 실제 클릭을 방해합니까? 또한이 작업은 특정 div에서만 가능합니다. 맞습니까? – oxo

간섭으로 무엇을 의미합니까? 원하는 곳에 좌표를 입력 할 수 있습니다. 아니면 일부 절대 위치 DIV (일부 제목/힌트). 의도 한대로 작동해야합니다. –

시도 :

$(function() { 
    $('#hover-img') 

    // show the coordinates box on mouseenter 
    .bind('mouseenter', function() { 
     $('#coordinates').show(); 
    }) 

    // hide it on mouseleave 
    .bind('mouseleave', function() { 
     $('#coordinates').hide(); 
    }) 

    // update text and position on mousemove 
    .bind('mousemove', function (evt) { 
     $('#coordinates').html(
     (evt.pageX - this.offsetLeft) + '/' + (evt.pageY - this.offsetTop) 
    ).css({ 
     left: evt.pageX + 20, 
     top: evt.pageY + 20 
     }) 
    }); 
});

주 : 사용되는 HTML 요소에 대한 » demo를 참조하십시오.

출처

2011-09-23 08:38:10 Yoshi

<html> 
    <head> 
    <script type="text/javascript"> 

    function getAbsoluteOffset(htmlelement) { 
     var offset={x:htmlelement.offsetLeft,y:htmlelement.offsetTop}; 
     while(htmlelement=htmlelement.offsetParent) 
     { 
     offset.x+=htmlelement.offsetLeft; 
     offset.y+=htmlelement.offsetTop; 
     } 
     return offset; 
    } 
    function image_onmouseout(ev) { 
     document.getElementById("mouseinfo").innerHTML="Mouse outside of image"; 
    } 
    function image_onmousemove(ev) { 
     var offset=getAbsoluteOffset(this); 
     document.getElementById("mouseinfo").innerHTML= 
      "Coordinates in page: (x: "+ev.clientX+",y:"+ev.clientY+")"+ 
      "<br/>"+ 
      "Coordinates in image: (x: "+(ev.clientX-offset.x)+",y:"+(ev.clientY-offset.y)+")"; 
    } 
    </script> 
    </head> 
    <body> 
    <div style="width:400px;height:400px;background:red;"> 
     <img src="image.png" 
     onmouseout="image_onmouseout.call(this,event);" 
     onmousemove="image_onmousemove.call(this,event);" /> 
    </div> 
    <span id="mouseinfo">Mouse outside of image</span> 
    </body> 
</html>

예 : http://jsfiddle.net/HWMtc/

출처

2011-09-23 09:22:54

이미지 위로 마우스를 가져 가면 십자형 커서가 x-y 좌표로 표시 될 수 있습니까?

답변

관련 문제