How do get the x&y corrdinates from an image input?

Question

I have an input set to a type of image:

<form id="MapForm" action="#">
    <input type="image" src="usa.jpg" id="usa_map" alt="USA"/>
</form>

I want to attach a function so that I can get the X & Y coordinates where a person clicked:

$('#MapForm').submit(ClickOnMap);
function ClickOnMap(data)
{
    return false;
}

I cannot find the X & Y coordinates inside 'data'. What am I doing wrong?

Answer 1

The parameter to the handler function (the "Event" object) has "pageX" and "pageY" values. Do the math with those and the "position()" or "offset()" for your img element (whichever works better; I find it really confusing to predict which of the two will work in any given situation).

In other words, the "position()" of the img element gives a "top" and "left" value. Subtract those from "pageY" and "pageX", and you have the position within the image itself relative to its top left corner.

I'm not sure I understand why you're binding to the "submit" event - is the image inside a "submit" button or something?

Answer 2

There's a good tutorial on this here, in the jQuery docs:

$('#usa_map').click(function(e){

  //Grab click position, mis the offset of the image to get the position inside
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  alert('X: ' + x + ', Y: ' + y);

  //set 2 form field inputs if you want to store/post these values
  //e.g. $("#usa_map_x").val(x); $("#usa_map_y").val(y);

  //Submit the form
  $('#MapForm').submit();
});

Answer 3

You can't get the x and y values, because the submit executed before the form submition.

From the jQuery API:

... The submit event is sent to an element when the user is attempting to submit a form...

... This happens prior to the actual submission ...