定义图像的各个部分并分配到悬停，单击事件

Question

让我们说我们有一个人体形象， 我希望当用户将鼠标悬停在身体​​的一部分（头部，手臂等）上时，此器官会变为绿色，当他点击已定义的动作时会发生。

是否可以使用javascript？如果是这样的概念会是什么？

提问的理由：

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

要做到这一点，我想我需要一个人体图像，并定义在这个图像上表示的每个器官的X-Y边界，并给它一些属性（名称）。

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

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

Answer 1

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

Answer 2

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