Get coordinates of clicked on image with Jquery

Question

I have a resized image (with width="100") and a jquery script to output the current coordinates when I click that image.

<img id="image" src="http://localhost/image.jpg" width="100"  >

<script>
   $('#image').mousemove( function(event) {
     window.current_x = Math.round(event.pageX - $('#image').offset().left) ;
     window.current_y = Math.round(event.pageY - $('#image').offset().top);
     window.current_coords = window.current_x + ', ' + window.current_y;
     $('#edit_instants_now').html('Current position: ' + window.current_coords + '.');
   }).mouseleave( function() {
     $('#edit_instants_now').html('&nbsp;');
   }).click( function() {
     $('#edit_instants_click').html('Last click: ' + window.current_coords + '. ');
     document.edit_instant.edit_instant_x.value = window.current_x;
     document.edit_instant.edit_instant_y.value = window.current_y;
   });
</script>

The problem is that I want to get the actual coordinates of the original image and not the resized one.

Do you have any suggestions? Thanks.

Do you know the original size? If so you can just interpolate. — Josep Valls, Sep 02 '15 at 18:33
And if you don't there are ways to get it: http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript — Josep Valls, Sep 02 '15 at 18:35
Even if I know the size, how can I get the coordinates? I'm new with jquery. — redviper2100, Sep 02 '15 at 18:37
That is basic algebra: If the clicked coordinate is X and the resized width is W; and the original width was A, the original coordinate is X/W*A — Josep Valls, Sep 02 '15 at 18:40

score 3 · Accepted Answer · answered Sep 02 '15 at 18:52

var naturalWidth = 100;
$('#image').mousemove(function(event) {
  var img = $('#image');
  console.log(naturalWidth);
  ratio = naturalWidth / img.width();
  window.current_x = (event.pageX - img.offset().left) * ratio;
  window.current_y = (event.pageY - img.offset().top) * ratio;
  window.current_coords = window.current_x + ', ' + window.current_y;
  $('#edit_instants_now').html('Current position: ' + window.current_coords + '.');
}).mouseleave(function() {
  $('#edit_instants_now').html('&nbsp;');
}).click(function() {
  $('#edit_instants_click').html('Last click: ' + window.current_coords + '. ');
  document.edit_instant.edit_instant_x.value = window.current_x;
  document.edit_instant.edit_instant_y.value = window.current_y;
});

$('img').on('load', function(e) {
  naturalWidth = e.target.naturalWidth;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img id="image" src="http://dummyimage.com/600x400/000/fff" width="100">

<form name="edit_instant">
  <div id="edit_instants_now"></div>
  <div id="edit_instants_click"></div>
  <input name="edit_instant_x">
  <input name="edit_instant_y">
</form>

score 1 · Answer 2 · answered Sep 02 '15 at 18:40

1

Get the size of original image, divide it by size of resized image - this will give you a scale factor, then multiply resulting x,y coordinates of clicked resized image by the scale factor.

Hope this helps.

answered Sep 02 '15 at 18:40

Dariusz Sikorski

4,309
5
27
44

Get coordinates of clicked on image with Jquery

2 Answers2