原生标签无法响应式适配，必须用JavaScript动态重算coords；usemap与map的name必须逐字节匹配（含#）；coords基于原始尺寸而非CSS渲染尺寸；shape属性需严格符合格式要求；area必须嵌套在map内且href、alt不可省略。
原生 <area> 标签无法自动响应式适配，必须用 JavaScript 动态重算 coords；纯 CSS 缩放图片时热区必然错位，这不是 bug，是规范行为。
usemap 与 map 的 name 必须逐字节匹配（含 #）
浏览器只认 usemap="#floor-plan" 这种写法，漏掉 #、大小写不一致（比如 usemap="#Floor-Plan" 对应 <map name="floor-plan"></map>）、连字符/下划线混用，都会导致整个热区静默失效——控制台不报错，点击没反应。
-
usemap="#product-map"✅ 必须配<map name="product-map"></map> -
usemap="product-map"❌ 漏#，映射被忽略 -
<map id="product-map"></map>❌usemap不认id，只认name - 调试建议：在 Chrome DevTools 中右键图片 → “检查”，看是否能高亮到对应
<map></map>；不能高亮基本就是匹配失败
coords 坐标永远基于原始尺寸，不是 CSS 渲染后尺寸
coords 绑定的是 img.naturalWidth / img.naturalHeight，不是 offsetWidth。一张 1200×800 的图缩到 375px 宽，coords="0,0,100,100" 实际只占屏幕约 31×21px，远低于触控最小推荐尺寸 44×44px。
- 矩形：
shape="rect"→coords="x1,y1,x2,y2"，且必须满足x1 且 <code>y1 - 圆形：
shape="circle"→coords="cx,cy,r"，r必须为正整数 - 多边形：
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,x1,y1"，顶点成对出现，总数必须是偶数；首尾点需手动重复闭合，别依赖浏览器自动补线 - 不要用
shape="default"做兜底：它会捕获所有未被其他<area>覆盖的点击，干扰调试
必须用 JS 动态重算 coords 才能响应式生效
没有纯 HTML/CSS 方案能自动适配。唯一可靠解法是监听图片加载和窗口缩放，读取缩放比后重设每个 <area> 的 coords 值。
立即学习“前端免费学习笔记（深入）”；
- 绑定事件：
window.addEventListener('resize', updateCoords)+img.addEventListener('load', updateCoords) -
updateCoords()中计算缩放比：scale = img.offsetWidth / img.naturalWidth（宽高比不一致时需分别处理） - 遍历所有
<area>，将coords字符串拆分为数字数组，每个值乘以scale，再拼回字符串赋给area.coords - 移动端尤其要测真机：iOS Safari 对小面积
poly热区响应迟钝，建议最小物理尺寸 ≥ 44×44px
area 必须嵌套在 map 内，且 href 和 alt 不可省略
<area> 是空元素，不能自闭合（<area> 是错的），且必须作为 <map></map> 的直接子节点；放在 <div> 里、或写在 <code><map></map> 外，所有浏览器都会忽略它。
-
href必须是有效 URL：href="./detail.html"或href="javascript:void(0)"都可以；纯href="#"或href="#section"在多数浏览器中会失效或触发页面跳动 -
alt是强制属性，不可缺失；哪怕只是空字符串alt=""，也得显式写上；屏幕阅读器靠它理解区域用途，比如alt="进入卫生间详情页" - 若用 JS 完全接管交互（如弹窗、埋点），保留
href="javascript:void(0)"，并在事件处理器中调用event.preventDefault() - 如果
<img alt="HTML area标签实现响应式图片热区的方法" >在 Shadow DOM 里，外部<map></map>默认不可见——这是最容易被忽略的兼容性断点
真正麻烦的不是写代码，而是每次改图尺寸、换设备、切主题色时，都要重新校验 coords 是否还落在可触控范围内；更隐蔽的问题是，当图片通过 <picture></picture> 切换 srcset 后，naturalWidth 可能异步变化，但 load 事件不会重复触发——这时候缩放比就错了。
