react mapping image point and setting style – CSS

event.target.getBoundingClientRect() returns the size of an element and its position relative to the viewport. And event.target.naturalWidth and event.target.naturalHeight provides the natural width and height of <img/> (original pixels wide)

so you can calculate absolute position of circle which will be placed on image by event.target.natural(width or height) / rect.(width or height)

Example

import React, { useState } from "react";
import "./styles.css";

import human_body from "./images/human body.png";
import circle from "./images/hover-circle.png";

export default function App() {
  const [circlePosition, setCirclePosition] = useState({ left: 0, top: 0 });

  const imgClick = (event: any) => {
    const rect = event.target.getBoundingClientRect();
    const scaleX = event.target.naturalWidth / rect.width;
    const scaleY = event.target.naturalHeight / rect.height;
    const left = event.nativeEvent.offsetX * scaleX - 20; 
    const top = event.nativeEvent.offsetY * scaleY - 20;
    setCirclePosition({ left, top });
  };

  return (
    <div className="App">
      <div>
        {circlePosition.left > 0 && circlePosition.top > 0 && (
          <img
            src={circle}
            alt="hover-body"
            style={{
              width: 50,
              height: 50,
              left: circlePosition.left,
              top: circlePosition.top,
              position: "absolute",
              zIndex: 10
            }}
          />
        )}
        <img id="human_body" onClick={imgClick} src={human_body} alt="body" />
      </div>
    </div>
  );
}