如何在image map指定图像区域上方显示带下载按钮的悬浮框？

嘿，我来帮你搞定这个悬浮框的需求！你现在已经有了能点击下载PDF的image map区域，要加悬停显示带按钮的小框，用HTML+CSS+JS就能轻松实现，具体步骤如下：

1. 调整HTML结构 #

首先，我们需要在现有代码里加一个默认隐藏的悬浮框，同时给那个PDF下载的area加个ID，方便后续JS精准定位它：

<!-- 你的原图片和map代码 -->
<img style="display: block; margin-left: auto; margin-right: auto; padding-bottom: 30px" 
     src="myimage.png" alt="" width="983" height="634" usemap="#imageMap" id="main-image"/>
<map name="imageMap">
  <area shape="rect" coords="20,400,182,200" href="" style="outline: none">
  <!-- 给这个PDF下载的area加个唯一ID -->
  <area shape="rect" coords="480,400,200,200" href="mypdf.pdf" style="outline: none" download id="pdf-area">
  <area shape="rect" coords="650,400,500,220" href="#image4" style="outline: none">
  <area shape="rect" coords="665,420,900,280" href="#image5" style="outline: none">
  <area shape="rect" coords="765,425,900,575" href="#image6" style="outline: none">
  <area shape="rect" coords="250,425,500,575" href="#image7" style="outline: none">
</map>

<!-- 新增的悬浮框，默认隐藏 -->
<div id="download-tooltip" style="display: none; position: absolute; background: white; padding: 10px; border: 1px solid #ddd; border-radius: 4px; z-index: 1000;">
  <button id="download-btn">Click here to download PDF</button>
</div>

2. 优化悬浮框样式（可选） #

给悬浮框和按钮加一点样式，让它看起来更美观顺手：

#download-tooltip {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#download-btn {
  background-color: #0071e3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

#download-btn:hover {
  background-color: #0077ed;
}

3. 编写JS实现交互逻辑 #

接下来用JS监听鼠标事件，控制悬浮框的显示、隐藏和定位，同时绑定按钮的下载功能：

// 获取需要用到的元素
const pdfArea = document.getElementById('pdf-area');
const tooltip = document.getElementById('download-tooltip');
const downloadBtn = document.getElementById('download-btn');
const mainImage = document.getElementById('main-image');

// 计算悬浮框的位置，确保它显示在目标区域上方居中
function setTooltipPosition(coords) {
  // 获取图片在页面中的实时位置信息
  const imageRect = mainImage.getBoundingClientRect();
  // 拆分area的coords坐标（rect类型是x1,y1,x2,y2格式）
  const [x1, y1, x2, y2] = coords.split(',').map(num => parseInt(num, 10));
  
  // 让悬浮框在区域上方居中，和区域保持10px间距
  const tooltipLeft = imageRect.left + (x1 + x2)/2 - tooltip.offsetWidth/2;
  const tooltipTop = imageRect.top + y1 - tooltip.offsetHeight - 10;
  
  tooltip.style.left = `${tooltipLeft}px`;
  tooltip.style.top = `${tooltipTop}px`;
}

// 鼠标悬停在PDF区域时显示悬浮框
pdfArea.addEventListener('mouseover', function() {
  setTooltipPosition(this.coords);
  tooltip.style.display = 'block';
});

// 鼠标离开区域时隐藏悬浮框
pdfArea.addEventListener('mouseout', function() {
  tooltip.style.display = 'none';
});

// 点击按钮触发下载，复用原area的下载链接
downloadBtn.addEventListener('click', function() {
  const downloadLink = document.createElement('a');
  downloadLink.href = pdfArea.href;
  downloadLink.download = pdfArea.download || '';
  downloadLink.click();
});

关键细节说明 #

• 定位逻辑：通过getBoundingClientRect()获取图片的真实位置，结合area的坐标计算悬浮框位置，确保不管图片在页面的哪个位置，悬浮框都能准确显示在目标区域上方。
• 事件处理：监听area的mouseover和mouseout来控制悬浮框的显隐，按钮点击时直接复用原area的下载链接，不需要重复写路径。
• 扩展性：如果以后要给其他区域加类似悬浮框，只需要给对应area加ID，然后复制JS里的事件监听逻辑即可。

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