ユーザーがクリックした画像の部分を取得

Question

ユーザーが画像をクリックした場所を見つけることはできますか？

私はイメージを持っています。イメージ上には、ユーザーがクリックできます。そして、ユーザーがクリックしたときに、場所を取得する方法を見つけようとしています。

Answer 1

クリックすると、イベントオブジェクトを使用してユーザーがクリックした座標が表示されます。

$("imageSelector").click(function(e){ 
    var pos = $(this).position(); 
    //The following are the x/y coordinates of the mouse click relative to image. 
    var x = e.pageX - pos.left; 
    var y = e.pageY - pos.top; 
}); 

Answer 2

マウスの位置を簡単に取得できます。次に、画像に対してそのポイントに何かを追加できます。ここで

は、マウスの位置の例です：jquery.com

Answer 3

を考慮にマージン、パディング、そして国境を取りに失敗した方法によってだまされてはいけません！

これは必要なコードです。 ：

$("#myImage").click (function (evt) { 

    var jThis    = $(this); 
    var offsetFromParent = jThis.position(); 
    var topThickness  = (jThis.outerHeight(true) - jThis.height())/2; 
    var leftThickness  = (jThis.outerWidth (true) - jThis.width())/2; 

    //--- (x,y) coordinates of the mouse click relative to the image. 
    var x     = evt.pageX - offsetFromParent.left - leftThickness; 
    var y     = evt.pageY - offsetFromParent.top - topThickness; 
}); 

See it in action at jsFiddle.