Calculate clicked offset of a image

Question

Possible Duplicate:
getting the X/Y coordinates of a mouse click on an image with jQuery

I want to calculate clicked position of a image, lets say this will be an example:

enter image description here

And if I would click on it somewhere, I want to display an alert with the X/Y position of the clicked area on the image, there are pixels on the images, so it should display x pixel offset and y pixel offset.

Is that possible to do with the Javascript? Any examples would be appreciated.

score 0 · Accepted Answer · edited Jul 21 '12 at 11:21

0

Using JQuery, use the pageX and pageY values of the event to which you substract to the offset of the element.

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+'}');
    });
});

edited Jul 21 '12 at 11:21

Bram Vanroy

27,032
24
137
239

answered Jul 21 '12 at 11:16

Bali Balo

3,338
1
18
35

You might want to use a valid image. – Bram Vanroy Jul 21 '12 at 11:17
A valid image ? I used the one from his question. – Bali Balo Jul 21 '12 at 11:19
Well this is strange: I didn't click his image before and went right to your fiddle. It showed me a 'broken image', even though I can see his link. Sorry for the comment then, my bad. – Bram Vanroy Jul 21 '12 at 11:21
@BaliBalo Works fine, but is that possible to make one pixel dimension to be 2 width / 2 height instead if 1/1 and then calculate it? – Scott Jul 21 '12 at 11:29
@Scott Sure, just divide by 2 the values. x: (e.pageX - $(this).offset().left) / 2 – Bali Balo Jul 21 '12 at 11:41

score 0 · Answer 2 · answered Jul 21 '12 at 11:18

0

You can do something like this to get x and y, where 'theimage' is the id of your image

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


});

answered Jul 21 '12 at 11:18

Joe M

2,527
1
25
25

Calculate clicked offset of a image

2 Answers2