图片热区失效主因是usemap与map name逐字节不匹配、coords坐标未按原始尺寸书写、href未用完整url或javascript:void(0)、alt缺失，且shadow dom中map须同根。
直接用 <area> 标签做图片分区链接，核心不是“能不能”，而是“怎么配对、怎么写坐标、怎么避免失效”。配对错一个字符、坐标少一位、href 写成 #section，热区就完全不响应，且浏览器不报错。
usemap 和 map name 必须逐字节匹配（含 #、大小写、无空格）
这是最常静默失败的环节。浏览器只认 usemap 值和 <map name="..."></map> 的 name 完全一致——包括开头的 #（HTML5 允许省略，但建议统一加）。
-
usemap="#nav-map"必须对应<map name="nav-map"></map>；写成usemap="nav-map"+<map name="nav-map"></map>在部分旧环境可能不工作 -
usemap="#Nav-Map"和<map name="nav-map"></map>大小写不一致 → 热区彻底无效 -
name中不能含中文、空格、下划线以外的符号（如@、.），否则 Safari 或 IE 可能拒绝解析 - 如果
<img>在 Shadow DOM 里，外部<map></map>不可见，必须把<map></map>也放进同一 Shadow Root
shape 和 coords 必须严格按规则书写（整数、顺序、数量）
shape 不是“大概像”，而是硬性关键字；coords 是像素坐标，基于图片原始尺寸，不是渲染后尺寸。
-
shape="rect"→coords必须是 4 个整数：coords="10,20,100,80"（左上 x,y + 右下 x,y） -
shape="circle"→coords必须是 3 个整数：coords="50,60,15"（圆心 x,y + 半径 r） -
shape="poly"→coords必须是偶数个整数，顶点按顺时针/逆时针顺序排列：coords="20,30,80,25,90,70,30,75"；若自相交（如星形交叉），Chrome 可能填充异常，IE 直接忽略 - Photoshop/Figma 导出的坐标常带空格或换行，必须手动清理成纯逗号分隔数字串，否则 Safari 会跳过整个
<area>
href 和 alt 是强制属性，且 href 不能是纯锚点
alt 不是可选提示，是无障碍强制要求；href 若写成 #top 或 #detail，绝大多数浏览器不会跳转——这不是 bug，是 HTML 规范限制。
- 必须写完整 URL：
href="./page.html#detail"、href="https://example.com"，或用 JS 驱动：href="javascript:void(0)"+onclick -
alt值不能为空字符串，至少写alt="产品详情区域"，否则屏幕阅读器无法识别 - 移动端热区最小建议 44×44px，若原始图缩放后热区变小，需用 JS 动态重算
coords，或改用 SVG 替代 - 不要依赖
defaultshape 实现“其余区域”跳转：它覆盖未被其他<area>覆盖的部分，但行为在各浏览器中不一致，尤其与poly混用时容易冲突
真正难的不是写几行 HTML，而是坐标得对、name 得对、href 得合法、缩放后还得准——尤其是当图片被 CSS width/height 缩放时，coords 依然按原始像素计算，这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
