选择图片区域并触发JS事件

Question

是否可以使用 HTML 画布或 Javascript 单击图像的一部分，并根据您单击的部分触发 Javascript 事件？

所以，例如;

如果我有一个手表的图像并且用户点击表带，这会触发一个与表带相关的内容的模态。同样，如果他们点击其中一个表针，这会触发不同的模态。

Answer 1

您可以使用 HTML 标记来执行此操作，请检查<area>html 中的标记，它可能对您有用。

检查以下代码可能对您有所帮助：

W3 学校 - 区域地图

您还可以使用<canvas>或<svg>在Fabric.js的帮助下以更先进的方式完成工作。

检查此链接，您将获得与图像或画布和 svg 相关的非常酷的东西：

MDN - Canvas API 教程

谢谢

function runfunc(planetId) {
  console.log('You selected:', planetId);
}

.as-console-wrapper { max-height: 2.8em !important; }

<p>Click on the Sun or on one of the planets to see which one was selected.</p>

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126"
     alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" id="Sun" onclick="runfunc(this.id)">
  <area shape="circle" coords="90,58,3" alt="Mercury" id="Mercury" onclick="runfunc(this.id)">
  <area shape="circle" coords="124,58,8" alt="Venus" id="Venus" onclick="runfunc(this.id)">
</map>