usemap 与 map 的 name 必须严格逐字节匹配（含大小写、无#号），否则热区静默失效；area 的 shape 和 coords 格式必须精确对应，coords 需为整数像素且基于原始尺寸；缩放时需用 js 动态重算坐标。
usemap 和 map 的 name 必须逐字节匹配
不加 # 或大小写错一个字母，热区就完全失效，浏览器既不报错也不提示。常见错误是 usemap="product-map" 对应 <map name="Product-map"></map> —— 大小写不一致导致静默失败。
正确写法只有两种等效形式：
-
usemap="#product-map"+<map name="product-map"></map> -
usemap="product-map"+<map name="product-map"></map>（HTML5 允许省略 #，但建议统一加 #，避免旧环境兼容问题）
注意：name 值里不能含空格、中文或特殊符号；usemap 和 name 必须出现在同一 DOM 上下文，比如 <img> 在 Shadow DOM 里，外部 <map></map> 就不可见。
area 的 shape 和 coords 格式必须严格对应
shape 只接受 rect、circle、poly、default 四种值，写成 rectangle 或 round 会直接忽略该区域。
每种 shape 要求的 coords 数量和顺序完全不同：
-
shape="rect"：4 个值，coords="x1,y1,x2,y2"（左上角 + 右下角） -
shape="circle"：3 个值，coords="cx,cy,r"（圆心 x、y + 半径） -
shape="poly"：偶数个值，coords="x1,y1,x2,y2,x3,y3,..."，顶点必须按顺时针或逆时针顺序排列，不能自相交
coords 中只允许数字和逗号，Photoshop 或 Figma 导出坐标后要手动删掉空格和换行，否则 Safari 可能跳过整个 area。
href 不能为空或纯 #id，alt 是强制属性
area 的 href 必须是有效 URL，href="#" 或 href="#section1" 在大多数浏览器中不会触发锚点跳转——这不是 bug，而是规范限制。
可行方案包括：
-
href="./page.html#detail"（带路径的完整锚点） -
href="javascript:void(0)"配合 JS 监听click事件 -
href="https://example.com"或相对路径如href="contact.html"
alt 属性不可省略，否则无障碍检测工具会报错，且部分屏幕阅读器无法识别该热区功能。推荐同时加 aria-label 提升语义，例如：alt="点击进入耳机详情页" aria-label="耳机区域"。
图片缩放后 coords 会偏移，必须用 JS 动态重算
原生 area 的 coords 基于图片原始像素尺寸，一旦用 CSS 设置 width/height 或响应式布局导致缩放，热区就立刻错位。
修复逻辑很简单：监听图片加载完成和窗口 resize，计算缩放比后更新每个 area.coords：
function updateCoords() {
const img = document.getElementById('product-img');
const scaleW = img.offsetWidth / img.naturalWidth;
const scaleH = img.offsetHeight / img.naturalHeight;
document.querySelectorAll('area').forEach(area => {
const coords = area.coords.split(',').map(Number);
const newCoords = coords.map((v, i) =>
i % 2 === 0 ? v * scaleW : v * scaleH
);
area.coords = newCoords.join(',');
});
}
img.addEventListener('load', updateCoords);
window.addEventListener('resize', updateCoords);
注意：不要用 getBoundingClientRect() 反推缩放比，它受 transform 影响；优先依赖 naturalWidth/Height 和当前 offsetWidth/Height。移动端还要考虑 DPR，但多数场景下用 CSS 缩放比已足够稳定。
最常被忽略的是 coords 坐标系原点固定在图片左上角，且所有值都是整数像素——哪怕你用 float 坐标赋值，浏览器也会向下取整。调试时可临时给 <img> 加 style="max-width:90%"，再用开发者工具截图叠加比对位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
