JavaScript-координаты, показывающие как большую ширину и высоту изображения

Question

Я пытаюсь получить местоположение мыши при наведении на изображение в пикселях в верхнем левом углу изображения. В настоящее время я использую атрибуты событий pageX и pageY, но это возвращает значение, большее, чем ширина и высота самого изображения.

var getImgCoord = function(e) { 
    var x = e.pageX, 
     y = e.pageY; 
    console.log(x + ' | ' + y); 
} 
$('.featuredImg').mousemove(function() { 
    getImgCoord(event); 
}); 

Любая помощь была бы принята с благодарностью.

Answer 1

страницаX и страницаY - координаты относительно верхнего левого угла документа не ваше изображение (оно уже говорит об этом).

вам нужно вычесть смещение от вашего элемента:

$('.featuredImg').mousemove(function(e) { 
    var x = e.pageX - $(this).offset().left, 
     y = e.pageY - $(this).offset().top; 
    console.log(x + ' | ' + y); 
}); 

Answer 2

http://jsfiddle.net/D5uuA/

var getImgCoord = function(e) { 
    var imageOffset = $(this).offset(); 
    //or $(this).offset(); if you really just want the current element's offset 
    var x = e.pageX - imageOffset.left, 
     y = e.pageY - imageOffset.top; 
    console.log(x + ' | ' + y); 
} 
$('.featuredImg').mousemove(getImgCoord);