Javascript 基于图像中像素的工具提示

我有一组图像。每个图像显示多个对象。每当我将鼠标指针悬停在图像中的每个对象上时，我都希望显示工具提示。我有像素坐标，图像中每个对象的宽度和高度

---

我知道为元素实现工具提示的几种不同方法，但不知道如何处理图像中与工具提示相关的像素尺寸

您可以使用图像贴图进行此操作：

var元素=[
{标签：“黄色”，x:112，y:23，w:112，h:89}，
{标签：“粉红”，x:27，y:119，w:110，h:195}，
{标签：'Brown'，x:198，y:124，w:112，h:90}
];
var img=document.querySelector（'img'），
map=document.createElement（'map'）；
map.name=‘我的地图’；
setAttribute（'usemap'，'#'+map.name）；
元素。forEach（函数（el）{
var area=document.createElement（'area'）；
area.title=el.label；
area.coords=[el.x，el.y，el.x+el.w，el.y+el.h].join（'，'）；
地图.儿童（地区）；
});
document.body.appendChild（map）
对象数据的格式如何？它可能有助于向页面布局显示该数据和任何代码。您可能会发现这很有帮助：。@showdev很抱歉评论延迟。我最近开始从事web开发，不知道存在图像映射。我从下面的答案中得到了这个想法，并实现了这个功能。它工作得很好。谢谢你的回复。