Skip to content

Instantly share code, notes, and snippets.

@davidcalhoun

davidcalhoun/image-progress.js

Created October 26, 2019 03:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davidcalhoun/d3463419dda99b435bf3c9ca5220a5ed to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davidcalhoun/d3463419dda99b435bf3c9ca5220a5ed to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. davidcalhoun created this gist Oct 26, 2019.
    9 changes: 9 additions & 0 deletions image-progress.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    /* 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)