纯HTML图像映射需严格匹配usemap与map的name（大小写敏感、#不可省）、coords格式正确（rect/circle/poly各按规则），缩放后坐标失效须JS重算或改用SVG，且area必须含具体alt以满足无障碍要求。
直接用 <map> 和 <area> 就能实现，不需要 JS 也能跳转，但坐标必须按原始图片像素写，缩放后会失效。
usemap 和 name 必须严格配对
这是最常卡住的地方：<img usemap="#product-map"> 中的 #product-map 必须和 <map name="product-map"> 的 name 完全一致（大小写敏感、不能多空格、不能漏 #）。漏掉 # 或拼错 name，整个热区就完全不响应。
常见错误现象：
- 鼠标悬停无手型，点击无反应
- 控制台没报错，但 area 标签在 Elements 面板里显示为“未激活”状态
rect / circle / poly 的 coords 写法不能错位
每个 <area> 的 shape 和 coords 是强绑定的，值个数、顺序、分隔符都错不得：
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"（左上、右下，不是宽高） -
shape="circle"→coords="cx,cy,r"（圆心 x、y、半径） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（顶点顺时针或逆时针列，总数必须为偶数）
⚠️ coords 值之间只允许英文逗号，不能有空格；坐标原点永远是图片左上角 (0,0)，跟 CSS transform 或 width 缩放无关。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
响应式场景下 coords 会偏移，必须重算比例
如果图片用了 width: 100% 或 max-width，原始 coords 会严重错位——因为浏览器仍按图片原始尺寸解析坐标，但渲染区域已缩放。
解决方式只有两种：
- 用 JS 监听图片加载完成，读取
naturalWidth/naturalHeight和offsetWidth/offsetHeight，动态重写所有<area>的coords - 改用 SVG 替代：把图片作为
<image>嵌入 SVG，用<rect>/<circle>等原生矢量元素定义热区，天然响应式
纯 HTML <map> 没有原生响应式支持，这点容易被忽略。
alt 属性不是可选，而是无障碍刚需
每个 <area> 必须带 alt，否则屏幕阅读器无法识别该区域功能，WCAG 2.1 会判失败。内容要具体，比如 alt="点击进入耳机参数页"，而不是 alt="区域1"。
另外：<area> 不支持 title 提示，hover 效果需额外加 CSS + ::after 或 JS 模拟；如果要执行 JS 行为（如弹窗、埋点），得删掉 href，用 addEventListener('click') 绑定，且注意阻止默认跳转：event.preventDefault()。
