Javascript 如何为座位图上的每个座位分配按钮？

事情是这样的：

该页面已经有了剧院座位图的png，每个座位的布局都用黑线表示

我想做的是：为每个座位分配一个方形按钮，这样当你按下按钮时，它就会描绘出一幅来自那个特定座位的视图

因此，以下问题：

我如何为每个座位分配一个按钮？我是否为按钮提供了相应的网格值

这里有一个供你想象的参考。。。

它是韩语的，但是你一看到它就会掌握它的窍门

---

另外，免责声明：我是Javascript新手，所以可能会遇到最简单的问题……

如果您试图将这些按钮覆盖在PNG图像上，您可能最终需要使用某种类型的Javascript。然而，在本例中，我的建议是，完成类似任务的更现代的方法是将座位图的SVG版本放在一起，SVG中的每个座位形状/路径都有自己独特的

id

。这样，您就可以在JavaScript中为任何座椅单击设置事件侦听器，并触发您想要的任何操作

这是我不久前创建的一个类似的小型项目，用美国地图来探索这个概念。在我下面的示例中，我实际上使用了复选框输入来跟踪任何给定状态的选中状态，但我建议您的案例仅设置事件侦听器，并在选择座椅时需要任何自定义样式时向座椅形状/路径添加自定义类

**确保以“完整页面”的形式打开此片段以查看地图

html，正文{margin:0！重要；padding:0！重要；高度：100%；溢出：隐藏；}iframe{width:100vw；height:100vh；}

见布兰登·麦康奈尔的笔（）
在…上

oops-its-javascript，很抱歉，您还没有实现这一点吗？单击红色球体将更新右侧的图像（尽管速度非常慢）。您好，您的网格节点应该具有线和列的位置/坐标索引，如（x，y）等等。也可以使用它们在背景中映射图片。单击按钮时，可以在一个小矩形区域中显示图片。或者，您可以使用座椅图标代替按钮，并为其添加悬停功能。当您将鼠标指针悬停在图标上时，可以显示图片。我建议使用SVG而不是image maps.SVGs可以被视为单独的dom元素，这意味着您可以使用javascript和css分别对其进行操作。sketch/figma等工具有一个可以将SVG代码复制粘贴到文件中的工具。谢谢antiq n mroritzsalla，我会尝试的！