image-progress.js

/* Keeps track of x/y "progress" as the user mouses over an image */
imageElement.addEventListener('mousemove', e => {
  const target = e.target;
  const rect = target.getBoundingClientRect();
  const xProgress = Math.floor(((e.clientX - rect.x) / rect.width) * 100);
  const yProgress = Math.floor(((e.clientY - rect.y) / rect.height) * 100);
  /* 0,0 = mouse over top left of image, 100/100 = mouse over bottom right of image */
  console.log(xProgress, yProgress);
}, false)