1

i need an help, i need to get the coordinates only on image into body. SO this is my dialog with image inside:

enter image description here

the image with the bodys is 400 x 400 px. So there is a method to get coordinates inside image? For example if i click on the center i will get 200 x 200 y.

I tried like this:

 document.getElementById("bodyImg").addEventListener('click', function (event) {
  // https://stackoverflow.com/a/288731/1497139
  var x = event.clientX;
  var y = event.clientY;
  alert("click on X: " + x + " Y " + y);
});

but return page x and page y... i need to get only the img coordinate.

Thanks.

Mr. Developer
  • 3,295
  • 7
  • 43
  • 110
  • 1
    https://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element/49580241 this may help you. – Dan Sep 22 '21 at 09:30
  • `pageX` will give you the x-coordinate of the cursor relative to the whole viewPort, and if you use `imgElement.getBoundingClientRect().left` you get the image's left side x-coordinate. If you take the difference, you should get the relative cursor position. – ShamPooSham Sep 22 '21 at 09:33
  • That said, I think you should use `(click)` on the element in the html template instead of adding an event listener. It's the Angular way. – ShamPooSham Sep 22 '21 at 09:34

0 Answers0