coords值必须基于图片naturalwidth/naturalheight手动填写，shape决定coords格式（rect需4个整数、circle需3个、poly需偶数个），usemap与map name须逐字节匹配（含#），响应式下coords不自适应，推荐用svg替代。
coords 值不是算出来的，是按原始尺寸手动填的
浏览器根本不帮你计算 coords，它只认你填进去的整数——而且必须基于图片文件本身的 naturalWidth 和 naturalHeight。设计稿标注的“120px 从左起”、截图工具量出的“视口坐标”、CSS 缩放后的显示位置，全都不作数。
常见错误现象：热区点不中，开发者工具里 area 元素明明存在，鼠标悬停也不变手型，控制台却一片安静。
- 用 Sketch/Figma 标注直接抄数值 → 忘了 @2x 图要除以 2
- 在 Chrome DevTools 的 Elements 面板里右键「截图选区」取点 → 返回的是视口坐标，不是相对于原图的像素
- 图片 HTML 没写
width/height，但 CSS 用了max-width: 100%→ 浏览器仍以naturalWidth为基准，你却按显示宽度填
最稳做法：打开 DevTools → 找到 img 元素 → 右侧面板看 naturalWidth 和 naturalHeight → 拿这个尺寸当标尺，在 PS 或在线测距工具（如 image-map.net）里手动描点填值。
shape 类型决定 coords 格式，错一位就失效
shape 不是装饰属性，它直接控制浏览器怎么解析 coords 字符串。填错数量、顺序或类型，热区要么缩成一个点，要么飞出画布外，浏览器照样不报错。
-
shape="rect"→ 必须且仅能填 4 个整数：coords="x1,y1,x2,y2"，左上角 + 右下角；要求x1 且 <code>y1 -
shape="circle"→ 必须且仅能填 3 个整数：coords="cx,cy,r"，圆心 + 半径；r不能为 0，也不能超过原图边界 -
shape="poly"→ 必须填偶数个整数：coords="x1,y1,x2,y2,x3,y3,..."；每两个一组是顶点；首尾不自动闭合，少一对或多一对，形状就漏边或歪斜
别依赖浏览器“自动补线”——有些版本会连，有些不会。poly 区域建议手动重复第一个点，比如三角形写成 coords="10,20,30,40,50,60,10,20"。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
usemap 和 map name 必须逐字节匹配，漏个 # 就静默失效
这是 90% 热区不响应的真正原因。浏览器不校验、不提示、不报错，只把整个 map 当空气处理。
-
<img usemap="#floor-plan">✅ 必须带#，且后面字符串和<map name="floor-plan"></map>完全一致 -
usemap="floor-plan"❌ 漏#，整个映射断开 -
usemap="#Floor-Plan"❌ 大小写不一致，断开 -
<map name="floor_plan"></map>❌ 下划线 vs 连字符，断开
调试时别靠眼睛扫：右键图片 → 「检查」→ 复制 usemap 值 → 再复制 <map name="..."></map> 的 name 值 → 粘贴到编辑器里用 diff 工具比对。
响应式页面里 coords 必然漂移，JS 动态重算风险高
HTML 规范明确：coords 是绝对像素值，不随 width、max-width、DPR 缩放而变化。你在桌面调好，手机上点不准，不是 bug，是机制如此。
常见反模式：
- 用
window.onresize+setTimeout强刷页面 → 用户体验崩坏，且 resize 事件频次不可控 - 只读
offsetWidth算缩放比 → 忽略了 padding/border/margin，结果偏差 5–10px - 图片还没加载完就取
naturalWidth→ 返回 0，所有 coords 被乘成 0
真正在意可维护性，就别硬扛 <map></map>：改用 <svg></svg>，<rect></rect> 和 <polygon></polygon> 天然支持百分比、viewBox 和媒体查询；如果必须用 <map></map>，就把图片导出为固定尺寸（比如统一 1200×800），所有 coords 全部按此基准填写，放弃“自适应”幻想。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
