Javascript 从HTML中的图像创建按钮

我这里有一个有趣的挑战，我不知道如何解决。我正在尝试从图像创建HTML按钮。这张图片就是我正在使用的例子。如何将所有梯形分割成单独的按钮，当点击相应区域时，这些按钮将单独注册。我假设我需要为每个梯形指定某种边界，但我不知道对于这样一个非常复杂的形状，你会怎么做。

使用HTML

元素从图像创建。图像贴图允许您根据提供的坐标绘制形状（圆形、矩形和不规则多边形），这些形状可以通过自己的

href

s单击。您还可以在单击事件期间获取x、y坐标

---

互联网上有各种免费工具来生成坐标和总体代码。

SVG如何？并使用javascript事件列表。我将矢量跟踪图像并将其转换为SVG。然后在DOM中附加适当的事件。您也可以使用clip path，但是这在数量有限的浏览器中起作用。您可以剪裁elementmap、svg或画布的形状