javascript - 定义图像的一部分并分配给悬停、单击事件

Question

假设我们有一张人体图像，我希望当用户将鼠标悬停在 body ​​的一部分(头部、 ARM 等)上时，这个器官会变成绿色，并且当他点击时会发生定义的 Action 。

使用 javascript 可行吗？如果是的话，概念是什么？

问题原因:

目标:这是现有项目的一小部分，用户可以在其中输入他的病史，所以我想给他一个下拉菜单，所有器官只显示一个人类模型，他点击并保存他的 tramua 历史等。

要做到这一点，我想我需要一个人体图像，并定义该图像上表示的每个器官的 X-Y 边界，并为其赋予一些属性(名称)。

1. 用户悬停:例如器官显示的边界和背景颜色为绿色
2. 当用户点击时，它会调用该对象表单。

js-jquery 中是否存在类似的东西？或者我需要发明轮子？

Answer 1

1. 您可以使用图像映射。您可以通过坐标定义图像内的不同区域。
2. 您可以使用 Canvas (HTML5，现代浏览器支持)
3. 您可以使用 svg(现代浏览器支持)
4. 一种更糟糕但可能是最简单的方法，即在 body 图像上放置绝对定位的 div。 (总是给出矩形形状)