媒体查询变更时，如何制作响应式Image Map及解决区域偏移？

核心解决思路 #

问题根源很直接：默认的<map>和<area>坐标是基于图片原始尺寸设定的，当媒体查询触发图片缩放时，这些坐标不会自动跟着适配，自然就会偏移。
核心解决方法就是用JS监听图片尺寸变化（或媒体查询触发事件），重新计算坐标的缩放比例，动态更新<area>的坐标值。

完整实现步骤 #

1. 基础HTML结构 #

先把图片和对应的map搭好，给元素加id方便后续操作：

<img src="your-image.jpg" alt="响应式图片" usemap="#imageMap" id="responsiveImg">
<map name="imageMap" id="responsiveMap">
  <area shape="rect" coords="100,100,200,200" href="#link1" alt="区域1">
  <area shape="circle" coords="300,300,50" href="#link2" alt="区域2">
</map>

2. CSS设置图片响应式 #

确保图片能随容器自适应缩放：

#responsiveImg {
  width: 100%;
  height: auto;
  max-width: 1200px; /* 可选，限制图片最大宽度 */
}

3. JS动态更新坐标 #

先把每个区域的原始坐标存起来，然后每次图片尺寸变化时，按当前缩放比例重新计算坐标：

// 存储每个区域的原始坐标和形状，和HTML里的area一一对应
const originalAreas = [
  { shape: 'rect', coords: [100, 100, 200, 200] },
  { shape: 'circle', coords: [300, 300, 50] }
];

const img = document.getElementById('responsiveImg');
const map = document.getElementById('responsiveMap');
const areas = map.getElementsByTagName('area');

// 计算并更新坐标的核心函数
function updateAreaCoords() {
  const currentWidth = img.offsetWidth;
  const currentHeight = img.offsetHeight;
  const originalWidth = img.naturalWidth;
  const originalHeight = img.naturalHeight;
  
  // 计算宽高的缩放比例
  const scaleX = currentWidth / originalWidth;
  const scaleY = currentHeight / originalHeight;

  // 遍历所有area更新坐标
  for (let i = 0; i < areas.length; i++) {
    const original = originalAreas[i];
    const newCoords = original.coords.map((coord, index) => {
      // 矩形：x坐标用宽比例，y坐标用高比例
      if (original.shape === 'rect') {
        return Math.round(index % 2 === 0 ? coord * scaleX : coord * scaleY);
      } 
      // 圆形：圆心坐标分别用宽高比例，半径取两者平均值避免变形
      else if (original.shape === 'circle') {
        if (index < 2) {
          return Math.round(index === 0 ? coord * scaleX : coord * scaleY);
        } else {
          return Math.round(coord * (scaleX + scaleY) / 2);
        }
      }
      // 多边形（poly）同理，按坐标的x/y分别缩放
      return Math.round(index % 2 === 0 ? coord * scaleX : coord * scaleY);
    });
    areas[i].coords = newCoords.join(',');
  }
}

// 页面加载时初始化一次
window.addEventListener('load', updateAreaCoords);
// 监听窗口大小变化（包括媒体查询触发的缩放）
window.addEventListener('resize', updateAreaCoords);

4. 结合媒体查询的特殊调整（可选） #

如果需要针对特定断点切换不同的坐标（比如移动端区域布局不一样），可以监听媒体查询的变化：

// 监听屏幕宽度≤768px的情况
const mobileQuery = window.matchMedia('(max-width: 768px)');
mobileQuery.addEventListener('change', (e) => {
  if (e.matches) {
    // 替换为移动端的区域坐标
    originalAreas[0] = { shape: 'rect', coords: [50,50,150,150] };
  } else {
    // 恢复桌面端原始坐标
    originalAreas[0] = { shape: 'rect', coords: [100,100,200,200] };
  }
  updateAreaCoords();
});

内容的提问来源于stack exchange，提问作者Sayeed Mahdi Mousavi