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;

Processing code for testing:

PImage img;
float x, y;
float tw=195, th=146; //thumb/cell width
float sw=390, sh=292; //sheet width
int cols=10, rows=10;
int index;

void setup() {
  size(390,292, P2D);
  //img = loadImage("140009.jpg");
}

void draw() {
  background(0);
  //image(img, 0, 0);
  fill(0);
  stroke(255);
  rect(0, 0, tw, 20);
  line(mouseX, 0, mouseX, 20);
  stroke(255, 255, 0);
  noFill();
  rect(x, y, sw/10, sh/10);
  
  fill(255);
  text(index+"\n"+x+"\n"+y+"\n"+(index % cols),50,50);
}

void mouseMoved() {
  if (mouseX>195 || mouseY>20) return;

  float pct = mouseX/tw;
  
  index = int(pct * rows * cols); //index
  x = (index % cols) / float(cols) * sw;
  y = (index / rows) / float(rows) * sh;
}