Есть ли способ отобразить изображение, где щелкнул с помощью JavaScript?

Question

У меня есть квадратная сетка в браузере как изображение. Я хочу, чтобы, нажимая на один квадрат, он отображал изображение в середине этого квадрата. Есть ли способ сделать это с помощью JavaScript?

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);
};

<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">

Answer 1

Если вам просто нужна сетка, попробуйте это:

[...document.querySelectorAll(".grid")].forEach((el,i) => {
  el.setAttribute("data-pos", i);
  el.addEventListener("click",function() {
    let pos = this.getAttribute("data-pos");
    this.innerText = "?";
    console.log(pos%8,pos%10)
  })
});

.grid { margin:2px }

<div id="container">
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><br/>
<span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span><span class="grid">⬜</span>
</div>

В качестве альтернативы используйте карту изображений - в моем сценарии позиционирование не точное, что вы можете исправить самостоятельно

document.querySelector("[name=image-map]").addEventListener("click",function(e) {
   e.preventDefault();
   let sq = e.target;
   console.log(sq.title);
   if (!sq.getAttribute("data-smile")) {
     let d = document.createElement("div");
     d.innerText = "?";
     d.className = "smile";
     // let coords = sq.getAttribute("coords").split(",");
     // d.style.top = coords[1]+"px";
     // d.style.left = coords[3]+"px";
     d.style.left = e.clientX + "px";
     d.style.top = e.clientY + "px";
     sq.setAttribute("data-smile","yes");
     document.getElementById("container").appendChild(d); 
   }  
})

.smile { font-size: xx-small; position:absolute  }

<!-- Image Map Generated by http://www.image-map.net/ -->
<div id="container">
  <img src="https://juliannakunstler.com/images_art1/color/mono21.jpg" usemap="#image-map">
</div>

<map name="image-map">
    <area target="" alt="0,0" title="0,0" href="" coords="7,6,22,21" shape="rect">
    <area target="" alt="0,1" title="0,1" href="" coords="23,7,36,20" shape="rect">
    <area target="" alt="10,8" title="10,8" href="" coords="144,111,156,125" shape="rect">
</map>

Answer 2

Попробуйте

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 = (mouseX-10)/15|0;
  let gridY = (mouseY-8)/15|0;
  
  smile.style.left=`${15+gridX*15}px`;
  smile.style.top=`${13+gridY*15}px`;
};

.smile { 
  position: absolute ;
  width: 16px;
  height: 16px;
  background: url(data:image/png;base64,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)
  }

<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 id="smile" class="smile">