How to get the X and Y coordinates of the magnified image?

Question

How do we get the X and Y coordinates of a magnified image? The scenario would be image when hovered would display the magnified image and when clicked it will display the specific coordinates of the magnified image.

Any help would much be appreciated.

const zoomer = (e => {
  const imageBox = document.querySelector("#img-zoomer-box");
  const original = document.querySelector("#img-1");
  const magnified = document.querySelector("#img-2");

  function handleMouseMoves(e) {
    const style = magnified.style;
    const x = e.pageX - this.offsetLeft;
    const y = e.pageY - this.offsetTop;
    const imgWidth = original.offsetWidth;
    const imgHeight = original.offsetHeight;
    let xperc = (x / imgWidth) * 100;
    let yperc = (y / imgHeight) * 100;

    //lets user scroll past right edge of image
    if (x > 0.01 * imgWidth) {
      xperc += 0.15 * xperc;
    }

    //lets user scroll past bottom edge of image
    if (y >= 0.01 * imgHeight) {
      yperc += 0.15 * yperc;
    }

    style.backgroundPositionX = `${xperc - 9}%`;
    style.backgroundPositionY = `${yperc - 9}%`;
    style.left = `${x - 180}px`;
    style.top = `${y - 180}px`;
  }

  imageBox.addEventListener("mousemove", handleMouseMoves);
})();

body {
  margin: 12% 30%;
  height: 450px;
  overflow: scroll;
  font-family: Arial, sans-serif;
  color: #333;
  background: #f4f4f4;
}

#img-zoomer-box {
  width: 500px;
  height: auto;
  position: relative;
  margin-top: 10px;
}

#img-1 {
  width: 100%;
  height: auto;
}

#img-zoomer-box:hover,
#img-zoomer-box:active {
  cursor: zoom-in;
  display: block;
}

#img-zoomer-box:hover #img-2,
#img-zoomer-box:active #img-2 {
  opacity: 1;
}

#img-2 {
  width: 340px;
  height: 340px;
  background: url('https://images.unsplash.com/photo-1472458258899-c48d47f2e53d?dpr=2&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=') no-repeat #FFF;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  position: absolute;
  opacity: 0;
  border: 4px solid whitesmoke;
  z-index: 99;
  border-radius: 100%;
  display: block;
  transition: opacity .2s;
}

<div>Roll over image to zoom in</div>
<div id="img-zoomer-box">
  <img src="https://images.unsplash.com/photo-1472458258899-c48d47f2e53d?dpr=2&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=" id="img-1" />
  <div id="img-2"></div>
</div>

Answer 1

If I understood your question correctly you want to get the coordination when the magnified image is clicked.

If that is the case and since you already have original variable you can add a custom function that handles click events and calculates where the clicked occurred:

  imageBox.addEventListener("click", handleImageClick);

Your function can be something like this:

   function handleImageClick(e) {
    const pageX = e.pageX - this.offsetLeft;
    const pageY = e.pageY - this.offsetTop;
    const imgWidth = original.offsetWidth;
    const imgHeight = original.offsetHeight;
    const xpixel = (pageX / 100) * imgWidth;
    const ypixel = (pageY / 100) * imgHeight;

    console.log(`Clicked with coordinates: x : ${xpixel} and y : ${ypixel}`);
  }

Edit

If you want to consider the image container in terms of width and height (For the values that will be printed on click) you can change your function into something like this :

function handleImageClick(e) {
  const x = e.pageX - this.offsetLeft;
  const y = e.pageY - this.offsetTop;
  
  const containerWidth = imageBox.offsetWidth;
  const containerHeight = imageBox.offsetHeight;
  const imgWidth = original.offsetWidth;
  const imgHeight = original.offsetHeight;


  const xPercentage = (x / containerWidth) * 100;
  const yPercentage = (y / containerHeight) * 100;

  const xpixel = (xPercentage / 100) * imgWidth;
  const ypixel = (yPercentage / 100) * imgHeight;

  console.log(`Clicked with coordinates: x : ${xpixel} and y : ${ypixel}`);
}

---

Now check your console when clicking the image:

const zoomer = (e => {
  const imageBox = document.querySelector("#img-zoomer-box");
  const original = document.querySelector("#img-1");
  const magnified = document.querySelector("#img-2");

  function handleMouseMoves(e) {
    const style = magnified.style;
    const x = e.pageX - this.offsetLeft;
    const y = e.pageY - this.offsetTop;
    const imgWidth = original.offsetWidth;
    const imgHeight = original.offsetHeight;
    let xperc = (x / imgWidth) * 100;
    let yperc = (y / imgHeight) * 100;

    //lets user scroll past right edge of image
    if (x > 0.01 * imgWidth) {
      xperc += 0.15 * xperc;
    }

    //lets user scroll past bottom edge of image
    if (y >= 0.01 * imgHeight) {
      yperc += 0.15 * yperc;
    }

    style.backgroundPositionX = `${xperc - 9}%`;
    style.backgroundPositionY = `${yperc - 9}%`;
    style.left = `${x - 180}px`;
    style.top = `${y - 180}px`;
  }
  
function handleImageClick(e) {
  const x = e.pageX - this.offsetLeft;
  const y = e.pageY - this.offsetTop;
  
  const containerWidth = imageBox.offsetWidth;
  const containerHeight = imageBox.offsetHeight;
  const imgWidth = original.offsetWidth;
  const imgHeight = original.offsetHeight;


  const xPercentage = (x / containerWidth) * 100;
  const yPercentage = (y / containerHeight) * 100;

  const xpixel = (xPercentage / 100) * imgWidth;
  const ypixel = (yPercentage / 100) * imgHeight;

  console.log(`Clicked with coordinates: x : ${xpixel} and y : ${ypixel}`);
}

  imageBox.addEventListener("mousemove", handleMouseMoves);
  imageBox.addEventListener("click", handleImageClick);
  
  
})();

body {
  margin: 12% 30%;
  height: 450px;
  overflow: scroll;
  font-family: Arial, sans-serif;
  color: #333;
  background: #f4f4f4;
}

#img-zoomer-box {
  width: 500px;
  height: auto;
  position: relative;
  margin-top: 10px;
}

#img-1 {
  width: 100%;
  height: auto;
}

#img-zoomer-box:hover,
#img-zoomer-box:active {
  cursor: zoom-in;
  display: block;
}

#img-zoomer-box:hover #img-2,
#img-zoomer-box:active #img-2 {
  opacity: 1;
}

#img-2 {
  width: 340px;
  height: 340px;
  background: url('https://images.unsplash.com/photo-1472458258899-c48d47f2e53d?dpr=2&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=') no-repeat #FFF;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  position: absolute;
  opacity: 0;
  border: 4px solid whitesmoke;
  z-index: 99;
  border-radius: 100%;
  display: block;
  transition: opacity .2s;
}

<div>Roll over image to zoom in</div>
<div id="img-zoomer-box">
  <img src="https://images.unsplash.com/photo-1472458258899-c48d47f2e53d?dpr=2&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=" id="img-1" />
  <div id="img-2"></div>
</div>