热区失效主因是usemap与map的name不匹配、coords格式错误或CSS缩放导致坐标偏移；须确保usemap带#前缀且与name完全一致，coords按shape类型严格书写，并用JS动态适配缩放。
热区点不动？90% 是 usemap 和 name 没对上，或者 coords 被 CSS 缩放“骗”了。
usemap="#xxx" 和
浏览器只认 usemap 值带 # 前缀、且和 <map></map> 的 name 属性完全一致（大小写、连字符、空格都不能差）。
-
usemap="#sales-map"✅ 必须配<map name="sales-map"> -
usemap="sales-map"❌ 漏#，整个映射失效 -
usemap="#Sales-Map"❌ 大小写不一致，<map name="sales-map">不响应 -
<map id="sales-map">❌usemap不读id，只读name
调试时右键图片 → “检查”，看是否高亮到对应 <map></map>；没高亮，基本就是这里断了。
shape 和 coords 格式错一位，热区就静默消失
coords 不是“随便填的数字”，它必须严格按 shape 类型提供固定数量、顺序和逻辑关系的像素值。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 正整数半径（r > 0） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须为偶数；交叉多边形渲染不可靠，首尾点建议手动重复以闭合 - 别用
shape="default"：它会捕获所有未覆盖区域，干扰调试
常见错误：coords="100,50,200,150,300"（奇数个值）、coords="100 50,200 150"（含空格）、或导出坐标时混入换行符——Safari 会直接忽略该 <area>。
CSS 缩放图片后，coords 全部偏移，这不是 bug，是规范
coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），和 CSS 渲染尺寸无关。只要图片被缩放，热区就必然错位。
- 原图 1200×800，
coords="0,0,100,100"是左上角 100×100 区域；缩放到 600×400 显示后，该热区在屏幕上只剩约 50×50 像素 - 移动端要求最小触控区 ≥ 44×44px，缩放后很容易低于阈值，导致点击无响应
- 纯 HTML/CSS 无法自动适配；
width/height属性设为原始尺寸再用外层容器控制显示，只能缓解拉伸问题，不能解决错位
唯一可靠解法是 JS 动态重算：img.addEventListener('load', updateCoords) + window.addEventListener('resize', updateCoords)，读取缩放比后批量更新每个 <area> 的 coords 字符串。
area 必须嵌套在 map 内，且 href、alt 不可省略
<area> 是空元素，不能自闭合（<area /> 是错的），也**不能**放在 <div> 或 <picture> 内部；它必须是 <map> 的直接子节点。
- 每个
<area>必须有href：空字符串、#id或相对路径如./page.html#section都可能失效；推荐用完整路径或javascript:void(0)配合 JS 处理 -
alt属性强制要求：缺失会导致可访问性失败，部分浏览器也会静默忽略该热区 -
<map>必须在<body>内，不能被注释包裹，也不能 JS 移除后重插——绑定丢失后不会自动恢复
最易被忽略的兼容性断点：<img> 在 Shadow DOM 里时，外部 <map> 默认不可见；此时原生方案彻底失效，需改用 SVG 或封装为自定义元素。
