图像内的可点击元素 - 网络棋盘游戏

Posted 2023-02-22

【中文标题】图像内的可点击元素 - 网络棋盘游戏

【英文标题】：Clickable elements inside an image - web board game

【发布时间】：2019-08-01 01:14:37

【问题描述】：

我正在尝试使用 React 实现棋盘游戏，并且我正在努力寻找一种方法将 UI（图像上）上的棋盘方块“转换”为数据。

有什么方法可以为附加图像上的正方形分配一些排序 ID，所以当用户点击一个正方形时，我会得到该正方形的 ID？

我想知道用户何时点击了图片中的某个方块。

PS.我没有 .svg 图片。只有一个 .png 文件..

【问题讨论】：

如何使用area 标签？ w3schools.com/tags/tag_area.asp

听起来很有趣！我要试试看。谢谢！

【参考方案1】：

您可以使用<map> 和<area> 标记，如下所示。您可以为每个“按钮”添加更多<area> 标签并为其赋予操作。您将不得不使用coords 一点。

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


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

<img src="https://i.stack.imgur.com/suFoO.jpg"    usemap="#mapname">

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

【讨论】：

@YousefM 欢迎您。我总是很乐意提供帮助。祝你的项目好运！