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

Posted 2023-05-08

【中文标题】定义图像的部分并分配给悬停，单击事件

【英文标题】：define parts of an image and assign to hover,click events

【发布时间】：2013-02-09 07:16:44

【问题描述】：

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

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

问题原因：

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

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

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

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

【参考方案1】：

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

【参考方案2】：

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