Кликабельные элементы внутри изображения - веб-настольная игра

Question

Я пытаюсь реализовать настольную игру с React, и я изо всех сил пытаюсь найти способ «преобразовать» квадраты доски в интерфейсе пользователя (на изображении) в данные.

Можно ли как-то назначить идентификаторы сортировки для квадратов на прикрепленном изображении, поэтому, когда пользователь нажимает на квадрат, я получаю идентификатор квадрата?

Я хочу знать, когда пользователь нажал на определенный квадрат внутри изображения.

PS.У меня нет изображения .svg. Только файл .png ..

Answer 1

Вы можете использовать теги <map> и <area>, как показано ниже. Вы можете добавить больше <area> тегов для каждой «кнопки» и дать ей действие. Вам придется немного поиграться с coords.

function doSomething() {
  console.log("click");
}

function doSomething2() {
  console.log("click2");
}

<img src="https://i.stack.imgur.com/suFoO.jpg" width="imgwidth" height="imgheight" alt="alttext" usemap="#mapname">

<map name="mapname">
    <area shape="rect" coords="40,10,130,130" alt="alttext" onclick="doSomething()">
    <area shape="rect" coords="130,10,250,130" alt="alttext" onclick="doSomething2()">
</map>