Determine the left offset of a click using jQuery

Question

Say you have an image that is 200px wide. Is there a way to determine how far from the left of the image you clicked? For example if you clicked in the dead center you would get 100. I tried using something like ui.position.left but couldn't get that to work. Any ideas?

Answer 1

First, get the X position of the image. Next, use the event information to get the X position of the click event.

Once you have those two, it's simple math to get the result:

$('#yourImg').click(function(e){
    var imgLeft = $(this).offset().left;
    var clickLeft = e.pageX;
    var howFarFromLeft = clickLeft - imageLeft;
});

Answer 2

You need to find the mouse coordinates at the time of the click (by using the event of the click, event.pageX, event.pageY). Then find the location of the image in the body. and subtract it from the mouseposition..

The result would be the coordinates inside the image.. Demo