Get accurate position for a click on a linked image using jquery

Question

I'm working on an app that allows tagging directly on photos via clicking (like Facebook, flickr, et al). However, I can't seem to register the right coordinates for a click on a photo. The problem is the x coordinates seem to be absolute x distance of a click within the browser window(rather than within the photo), while the y coordinates are often negative or incredibly small (negative near the top, small near the bottom). These are the values I get when clicking near the top left corner (which should register as being at or near 0: "x"=>"219", "y"=>"-311"... 219 seems about right when measuring the distance from the left side of the browser window, but the distance should be within the photo area)

I'm currently capturing click events and coordinates on a photo using a regular link (the link contains other relevant photo data) and doing the math (same calculations used in the jquery docs) before passing it along to my rails app. I doubt the method has much to do with the erroneous values, though I suspect the math or some css quirk could be at fault. In either case, I'm absolutely boggled.

JS:

$(document).ready(function(){
clickTag();

});

function clickTag(){
   $("#taggable").click(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var url = $(this).attr("href");
        courl = url + '&x=' + x + '&y=' + y;
      $.ajax({
        type:"GET",
        url: courl,
        dataType:"script"
        });
        return false;
   }); 
}

CSS:

`<div class="content">
    <div id="image_container" style="position:relative;width:405px;float:left;height:600px;>
        <a href="/tags/new_xy?look_id=188&amp;photo_id=1150" id="taggable" style="position:relative;top:0;left:0px;"><img alt="taggable_image" src="taggable_image.jpg" /></a>
    <div class="tags" id="tags"></div>
    </div>
</div>`

Answer 1

for your x and y try using this:

var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;

let me know if that doesn't work

EDIT: to clarify - you are getting the left and top offset from the dom element directly. the reason i suggest you use the jQuery offset() function is that jQuery is more likely to calculate the correct position cross browser.

EDIT 2: Can you please try to assign the click event to the image as opposed to the link. I have a sneaking suspicion that the link is reporting its top offset as the bottom of the element it encapsulates...

Answer 2

My function is:

function getCoords(target, event)
{
    var $target = $(target);
    var offset = $target.offset();
    var bordersize = $target.attr('border');
    return {
        x:  (event.pageX - offset.left - bordersize) | 0,
        y:  (event.pageY - offset.top - bordersize) | 0
    }
}

call:

$("#image").on('click', function(event){
    var coords = getCoords(this, event);
    console.log('X: ', coords.x);
    console.log('Y: ', coords.y);
});

Note: used fast float2int.