I have a square grid in browser as an image. I want when I click on a single square, it to display me an image in the middle of this square. Is there a way to do this with JavaScript?

```js
function mouseClick(e) {
  let mouseX, mouseY;

  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  let gridX = Math.floor(mouseX / 75.591);
  let gridY = Math.floor(mouseY / 75.591);
  console.log(gridY, gridX);
};
```

```html
<meta name="viewport" content="width=device-width, user-scalable=no">
<img src="https://juliannakunstler.com/images_art1/color/mono21.jpg" class="labyrinth" onclick="mouseClick(event)" />
<img class="smile">
```