Javascript contactsheet / spritesheet / thumbsheet / video thumb scrub

thumbsheet.js

/*
CSS:
.thumb {
    width: 192px;
    height: 146px;
    border: 1px solid black;
    background-image: url(140001.jpg); //140001.jpg is a thumbsheet of 10x10
}
*/

function onmousemove(event) {
  const pct = event.offsetX / event.target.offsetWidth;
  const rows = 10;
  const cols = 10;
  const index = pct * rows * cols;
  const sheetWidth = 1950;
  const sheetHeight = 1460;
  const x = (Math.ceil(index % cols) / cols) * sheetWidth;
  const y = (Math.ceil(index / rows) / rows) * sheetHeight;
  div.style.backgroundPosition = `${x}px ${y}px`;
}

//setup
div.onmousemove = onmousemove;