[자바 스크립트] 사용자가 이미지 위로 마우스를 가져갈 때 이미지의 (x, y) 좌표를 실시간으로 사용자에게 표시하려면 어떻게해야합니까?

여기 있습니다 :

HTML :

<img class="coords" src="http://i.imgur.com/bhvpy.png">

자바 스크립트 :

var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];

$( '.coords' ).
    each(function () {
            var pos = $( this ).position(),
                        top = pos.top,
                                    left = pos.left,
                                                width = $( this ).width(),
                                                            height = $( this ).height();
                                                            
                                                                    $( this ).
                                                                                mousemove(function ( e ) {
                                                                                                var x, y;
                                                                                                
                                                                                                                x = ( ( e.clientX - left ) / width ).toFixed( 1 ),
                                                                                                                                y = ( ( height - ( e.clientY - top ) ) / height ).toFixed( 1 );
                                                                                                                                
                                                                                                                                                $( tooltip ).text( x + ', ' + y ).css({
                                                                                                                                                                    left: e.clientX - 30,
                                                                                                                                                                                        top: e.clientY - 30
                                                                                                                                                                                                        }).show();
                                                                                                                                                                                                                    }).
                                                                                                                                                                                                                                mouseleave(function () {
                                                                                                                                                                                                                                                $( tooltip ).hide();
                                                                                                                                                                                                                                                            }); 
                                                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                                                

라이브 데모 : http://jsfiddle.net/pSVXz/12/

업데이트 된 코드를 사용하면이 기능으로 여러 이미지를 가질 수 있습니다 "coords". 이미지에 클래스 를 추가하면 됩니다.

참고 :이 코드는 완전히로드 된 이미지에 대해서만 수행 할 수있는 이미지의 크기를 읽어야하므로 load핸들러 (대신 ready) 핸들러 내부에 있어야합니다.

-------------------

이렇게해야합니다.

HTML

<img id="the_image" src="http://placekitten.com/200/200" />
<div id="coords"></div>

자바 스크립트

$image = $('#the_image');
imgPos = [
    $image.offset().left,
        $image.offset().top,
            $image.offset().left + $image.outerWidth(),
                $image.offset().top + $image.outerHeight()
                ];
                
                $image.mousemove(function(e){
                  $('#coords').html((e.pageX-imgPos[0]) +', '+ (e.pageY-imgPos[1]));
                  });
                  

데모 (업데이트 됨) : http://jsfiddle.net/az8Uu/2/

참고 : 4 밀리 초마다 함수를 호출하지 않으려면 mousemove 핸들러를 조절 하는 것도 좋은 생각입니다.

-------------------

요구 사항에 따라 다음을 기반으로합니다.

$("img").mousemove(function(e) {
    console.log(e.layerX + ", " + e.layerY);
    });
    

출처
https://stackoverflow.com/questions/7414984