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

image, input, javascript, jquery

Solution

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();
});

Problem

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?

Original source