使用image map时，如何用弹出文本替代href链接？

步骤1：调整HTML结构 #

给需要触发弹窗的<area>标签添加标识类和弹窗文本的自定义属性，替换原有的href避免跳转；新增弹窗容器用于显示文本。

<div id="container">
  <div id="image_container">
    <img src="http://tinypic.com/images/goodbye.jpg" usemap="#image_map">
    <map name="image_map">
      <area alt="Left Eye" title="Left Eye" class="popup-area" data-popup-text="这是左眼区域的弹窗文本" coords="118,36,148,80" shape="rect" href="javascript:void(0)">
      <area alt="Mouth" title="Mouth" class="popup-area" data-popup-text="这是嘴巴区域的弹窗文本" coords="121,84,198,118" shape="rect" href="javascript:void(0)">
    </map>
  </div>
  <!-- 弹窗容器 -->
  <div id="popup-box" class="popup-hidden">
    <div id="popup-content"></div>
  </div>
</div>

步骤2：添加弹窗样式 #

用CSS设置弹窗的外观和定位规则，默认隐藏：

#popup-box {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 100;
}

.popup-hidden {
  display: none;
}

步骤3：编写JavaScript逻辑 #

监听区域点击事件，阻止跳转并显示对应弹窗；同时添加点击外部关闭弹窗的功能：

document.addEventListener('DOMContentLoaded', function() {
  const popupAreas = document.querySelectorAll('.popup-area');
  const popupBox = document.getElementById('popup-box');
  const popupContent = document.getElementById('popup-content');

  // 点击弹窗区域时显示对应文本
  popupAreas.forEach(area => {
    area.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为
      const popupText = this.getAttribute('data-popup-text');
      popupContent.textContent = popupText;
      
      // 定位弹窗到点击区域下方（可根据需求调整坐标）
      const rect = this.getBoundingClientRect();
      popupBox.style.left = `${rect.left + window.scrollX}px`;
      popupBox.style.top = `${rect.bottom + window.scrollY + 10}px`;
      
      popupBox.classList.remove('popup-hidden');
    });
  });

  // 点击页面其他区域关闭弹窗
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.popup-area') && !e.target.closest('#popup-box')) {
      popupBox.classList.add('popup-hidden');
    }
  });
});

说明 #

• 通过data-popup-text属性存储每个区域的弹窗文本，方便后续修改维护。
• 弹窗的定位坐标可根据实际需求调整，确保显示在视觉合理的位置。
• 点击弹窗以外的区域会自动关闭弹窗，优化用户交互体验。

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