如何在image map的area悬停时显示图片且保留原有点击跳转功能

实现逻辑 #

• 完全保留原生image map的点击跳转功能，不修改原有交互逻辑
• 新增悬浮图片容器，默认隐藏，通过监听area区域的鼠标事件控制悬浮图片的显隐、位置和展示内容
• 通过自定义属性存储每个区域对应要展示的额外图片地址，便于后续修改扩展

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
<style>
/* 悬浮图片样式，可根据需求自行调整大小、边距、阴影等 */
.hover-img {
  display: none;
  position: absolute;
  z-index: 999;
  width: 200px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  pointer-events: none; /* 避免悬浮图片拦截鼠标事件，保证原区域点击功能正常 */
}
/* 图片外层容器，用于辅助悬浮元素定位 */
.map-container {
  position: relative;
  display: inline-block;
}
</style>
</head>
<body>

<h2>图片热区示例</h2>
<p>点击电脑、手机或者咖啡杯，即可跳转到对应详情页面：</p>

<div class="map-container">
  <img src="workplace.jpg" alt="工作台" usemap="#workmap" width="400" height="379">
  <!-- 悬停时展示的额外图片容器 -->
  <img class="hover-img" src="" alt="">

  <map name="workmap">
    <!-- 新增data-hover-img属性，填入对应区域要展示的额外图片地址 -->
    <area shape="rect" coords="34,44,270,350" alt="电脑" href="computer.htm" data-hover-img="computer-hover.jpg">
    <area shape="rect" coords="290,172,333,250" alt="手机" href="phone.htm" data-hover-img="phone-hover.jpg">
    <area shape="circle" coords="337,300,44" alt="咖啡杯" href="coffee.htm" data-hover-img="coffee-hover.jpg">
  </map>
</div>

<script>
const hoverImg = document.querySelector('.hover-img');
const areas = document.querySelectorAll('area');

areas.forEach(area => {
  // 鼠标进入热区时加载并显示对应图片
  area.addEventListener('mouseover', () => {
    const targetImg = area.getAttribute('data-hover-img');
    hoverImg.src = targetImg;
    hoverImg.style.display = 'block';
  });

  // 鼠标在热区内移动时，悬浮图片跟随鼠标位置
  area.addEventListener('mousemove', (e) => {
    // 10px为鼠标和图片的偏移量，避免图片遮挡鼠标
    hoverImg.style.left = `${e.pageX + 10}px`;
    hoverImg.style.top = `${e.pageY + 10}px`;
  });

  // 鼠标离开热区时隐藏图片
  area.addEventListener('mouseout', () => {
    hoverImg.style.display = 'none';
    hoverImg.src = '';
  });
});
</script>

</body>
</html>

配置说明 #

• 每个<area>标签的data-hover-img属性值替换为你自己的额外图片地址即可
• 如果不需要悬浮图片跟随鼠标，可删除mousemove事件监听，直接在.hover-img的CSS样式中写死top和left固定展示位置
• 可自行修改.hover-img的CSS属性，调整悬浮图片的大小、边框、阴影等展示效果

内容的提问来源于stack exchange，提问作者Khairunnisa Syahfitri