弹出图像的某些点以显示文本
我有一个这样的地图图像：
我在谷歌上搜索了一下，但什么也没找到。
我想知道是否有一个JS或Jquery库来实现一些弹出窗口或工具提示，当鼠标在某些点上时，并显示此图像中每个点的描述。
例如，如果我把鼠标放在美国，我想要显示一些弹出窗口，如果我把鼠标放在墨西哥，我想要另一个。如果有任何例子，我很感激。问候
回答 4
Stack Overflow用户
发布于 2018-05-29 07:11:23
您可以使用具有多个元素的来创建可单击区域并侦听其中的click事件。
然后，您需要阻止默认调用Event.preventDefault()，并以任何您想要的方式处理它，例如打开弹出窗口或覆盖在地图顶部。
下面是一个简单的示例，您可以在其中单击US：
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属性，并使用pointer-events: none将其覆盖在地图上，以防止它获得应该转到<area>的MouseEvents (click, hover...)。
enhzflep也提供了here的一个实现：How to apply Hovering on html area tag?
另一种选择是使用而不是
，它可以很好、很容易地处理所有这些事情。
Stack Overflow用户
发布于 2018-05-29 07:21:55
Stack Overflow用户
发布于 2022-01-11 08:56:46
<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>https://stackoverflow.com/questions/50574328
复制相似问题