여기 있습니다 :
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