Skip to content

Instantly share code, notes, and snippets.

@davidcalhoun
Created October 26, 2019 03:00
Show Gist options
  • Save davidcalhoun/d3463419dda99b435bf3c9ca5220a5ed to your computer and use it in GitHub Desktop.
Save davidcalhoun/d3463419dda99b435bf3c9ca5220a5ed to your computer and use it in GitHub Desktop.
/* 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment