javascript - 画像のクリックされたオフセットを計算する

Question

重複の可能性:
jQuery を使用して画像をマウスでクリックしたときの X/Y 座標を取得する

画像のクリックされた位置を計算したいのですが、これが例になるとしましょう：

どこかをクリックすると、画像上のクリックされた領域の X/Y 位置でアラートを表示したいので、画像にピクセルがあるため、x ピクセルオフセットと y ピクセルオフセットを表示する必要があります。

Javascriptでそれは可能ですか？任意の例をいただければ幸いです。

Answer 1

JQuery を使用して、要素のオフセットを減算するイベントの pageX および pageY の値を使用します。

http://jsfiddle.net/BramVanroy/D63KS/1/

$(document).ready(function(){
    $('img').mousedown(function(e){
        var offset = {
            x: e.pageX - $(this).offset().left,
            y: e.pageY - $(this).offset().top
        }
            $('#info').html('{'+offset.x+'; '+offset.y+'}');
    });
});​

Answer 2

次のようにして x と y を取得できます。ここで、「theimage」は画像の ID です。

$("#theimage").live("click",function(e){
e.preventDefault();
    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;


});