0

I have an image in a React application, in the future images from cameras will be displayed there. the task is to get the coordinates of the clicked place by clicking on the image. as if we are clicking on a target in the image.

enter image description here

I've tried using const coordnates = [e.clientX, e.clientY] but I get screen coordinates not the

node_modules
  • 4,790
  • 6
  • 21
  • 37
Dmitriy
  • 35
  • 7
  • I have formatted your post, but it also seems like there is some info missing in your post. Use the [edit] link to add additional information. – node_modules Nov 18 '22 at 12:12

1 Answers1

1

It seems like that you're looking for this: Find mouse position relative to element. (getBoundingClientRect)

But there are plenty options that you can use for example <map>.

Andrej
  • 161
  • 1
  • 5
  • thanks for the answer. really helped. Perhaps you can help solve this problem. that when you click on the image on the image, the place of the click will appear in the form of a goal (as in the picture) – Dmitriy Nov 18 '22 at 13:04
  • First think that comes to my mind is to set `position: relative` to the wrapper element and then create listener to `onClick` and create for example `` in with following css: `position: absolute; top: [valueFromClick]; left: [valueFromClick];`. But there's definitely a easier approach. **Edit:** And here it is - https://stackoverflow.com/a/63852077/19147494 (that's what you're looking for) – Andrej Nov 18 '22 at 19:31
  • Thanks, @Andrej. Thanks to your help everything worked out! – Dmitriy Nov 21 '22 at 06:28