我在谷歌上搜索过，但没有找到。
我想知道是否有 JS 或 Jquery 库可以在鼠标悬停在某些点上时实现一些弹出或工具提示，并显示此图像中每个点的描述。
例如，如果我把鼠标放在美国我想显示一些弹出窗口，如果我把鼠标放在墨西哥我想要另一个。如果有任何例子我很感激。问候
【问题讨论】：
<img> 元素？ <canvas>?
<img src="">@clabe45
mouseover 事件以显示您想要显示的任何内容，也许这在这种情况下会有所帮助iamceege.github.io/tooltipster
标签： javascript jquery
您可以使用带有多个<area> 元素的<map> 来创建可点击区域并监听它们上的click 事件。
然后，您需要阻止默认调用 Event.preventDefault() 并以您想要的任何方式处理它，例如在地图顶部打开弹出窗口或叠加层。
这是一个简单的例子，您可以点击美国：
document.getElementById('mapMap').onclick = (e) => {
e.preventDefault();
if (e.target.dataset.country === 'US') {
alert('Hi!');
}
};body {
margin: 0;
}
#mapImage {
max-width: 420px;
}<img id="mapImage" src="https://i.stack.imgur.com/C2Mha.png" usemap="#map">
<map id="mapMap" name="map">
<area data-country="US" shape="poly" coords="54,70,119,68,96,94,59,86,54,79" href="#">
</map>这种方法的主要问题是<area> 坐标是以 CSS 像素定义的，因此您需要使用 JavaScript 根据图像的大小重新计算坐标，除非它始终具有相同的大小。
David Thomas 在这里提供了一个实现：Is possible create map html area in percentage?
然后，另一个限制是您不能在 <area> 元素上应用悬停样式，但同样，您可以使用 JavaScript 绘制 <area> 的形状，使用它的 shape 和 coords 属性在<canvas> 上并用pointer-events: none 将其覆盖在地图上，以防止它获得MouseEvents (click, hover...) 应该转到<area>。
enhzflep 也提供了这里的实现：How to apply Hovering on html area tag?
另一种选择是使用<svg> 而不是<img>，它可以轻松轻松地处理所有这些问题。
【讨论】：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}
</style>
</style>
</head>
<body>
<div class "container">
<div class "picture">
<img id="mapImage" src="put_text_heatmap.jpg" height="1036px" width="1237px" usemap="#map">
<map id="mapMap" name="map">
<area data-brand="Ajile" href="dashboard_images/9.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="127, 629, 283, 869">
<area data-brand="Honey" href="dashboard_images/8.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="514, 842, 803, 1024">
<area data-brand="Akkriti" href="dashboard_images/7.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="774, 265, 909, 409">
<area data-brand="Cosmatics" href="dashboard_images/6.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="985, 809, 1139, 992">
<area data-brand="Annabelle" href="dashboard_images/5.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="258, 442, 429, 584">
<area data-brand="Sunglases" href="dashboard_images/4.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="827, 851, 980, 1033">
<area data-brand="VanHeusen" href="dashboard_images/3.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="343, 611, 514, 753">
<area data-brand="jealous" href="dashboard_images/2.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="500, 358, 595, 409">
<area data-brand="Denim" href="dashboard_images/1.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="163, 879, 334, 999">
</map>
</div>
</div>
</body>
<script>
window.onload = function() {
document.getElementById("mapMap").addEventListener("click", function (e) {
<!-- alert("CLICKED"); -->
var img = document.createElement('img');
$("#snowballAppear")[0].appendChild(img);
});
};
</script>
</html>
【讨论】：
</style> _ 您应该编辑您的答案并删除已关闭标签的一份副本。这样做将使您的其余代码显示正常工作
<html>
<head>
body {
background-repeat: no-repeat;
background-attachment: fixed;
<!-- overflow: hidden; -->
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
<div id="modal-background">
<div id="modal-content"></div>
</div>
<img id="IMGMAPS" src="put_text_heatmap.jpg" height="1036px" width="1237px" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area data-brand="Ajile" data-imageurl="dashboard_images/9.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="127, 629, 283, 869" , target="_self" />
<area data-brand="Honey" data-imageurl="dashboard_images/8.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="514, 842, 803, 1024" , target="_self" />
<area data-brand="Akkriti" data-imageurl="dashboard_images/7.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="774, 265, 909, 409" , target="_self" />
<area data-brand="Cosmatics" data-imageurl="dashboard_images/6.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="985, 809, 1139, 992" , target="_self" />
<area data-brand="Annabelle" data-imageurl="dashboard_images/5.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="258, 442, 429, 584" target="_self" />
<area data-brand="Sunglases" data-imageurl="dashboard_images/4.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="827, 851, 980, 1033" target="_self" />
<area data-brand="VanHeusen" data-imageurl="dashboard_images/3.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="343, 611, 514, 753" target="_self" />
<area data-brand="jealous" data-imageurl="dashboard_images/2.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="500, 358, 595, 409" target="_self" />
<area data-brand="Denim" data-imageurl="dashboard_images/1.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="163, 879, 334, 999" target="_self" />
</map>
<script>
$(document).ready(function () {
$("area").click(function () {
$("#modal-content").html("<img src=" + $(this).data("imageurl") + ">");
$("#modal-background").fadeIn();
});
$("#modal-background").click(function () {
closeModal();
});
});
function closeModal() {
$("#modal-background").fadeOut();
}
</script>
</body>
</html>
【讨论】：