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

Question

假设我们有一个人体图像，我希望当用户将鼠标悬停在身体​​的一部分（头部、手臂等）上时，这个器官变成绿色，当他点击一个定义的动作时发生。

使用javascript可行吗？如果是这样，这个概念是什么？

提问原因：

目标： 这只是用户输入他的病史的现有项目的一小部分，所以我想给他一个所有器官的下拉列表，只显示一个人体模型，然后他点击并保存他的tramua历史等。

为此，我认为我需要一张人体图像，并定义该图像上表示的每个器官的 XY 边界，并为其赋予一些属性（名称）。

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

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

Answer 1

1. 您可以使用图像映射。您可以通过坐标定义图像内部的不同区域。
2. 您可以使用画布（HTML5，现代浏览器支持）
3. 您可以使用 svg （现代浏览器支持）
4. 一种更糟糕的方法，但可能是最简单的方法，将绝对定位的 div 放在身体图像上。（总是会给出矩形）

Answer 2

您可以使用HTML 地图并将鼠标事件绑定到不同的区域以更改颜色并在单击时执行不同的回调。