合法的只有shape="circle"（全小写）且coords必须为三个正整数，usemap与map name须字符级完全匹配，图片缩放会导致热区偏移，推荐改用svg实现响应式。
shape="circle" 必须严格小写且仅接受三个整数
浏览器对 shape 属性完全不宽容，shape="Circle"、shape="oval"、shape="round" 全部无效——不是报错，而是静默忽略，对应区域点击无响应。真正合法的只有 shape="circle"（全小写），且必须搭配恰好三个正整数的 coords 值。
常见错误包括：
-
coords="120,90,25.5"：半径含小数，被截断为25或直接丢弃 -
coords="120,90,-25"：负数半径，整个area失效 -
coords="120,90,0"：半径为 0，区域不可点 -
coords="120, 90, 25"：含空格，第二值解析为"90"，后续全丢
coords="cx,cy,r" 的坐标必须基于原始图片尺寸
coords 中的 cx、cy、r 全部是像素单位，原点在图片左上角 (0,0)，且**完全不随 CSS 缩放或 object-fit 变化**。只要图片用了 width: 100%、max-width 或 height: auto，热区就会偏移失效。
实操建议：
- 用浏览器 DevTools 的「截图测量」工具直接量原始图上的像素位置（右键图片 → “在新标签页中打开图像”，再测量）
- 不要依赖 Photoshop 或 Figma 的标尺读数，除非你确认导出图尺寸与 HTML 中加载的图完全一致
- 若必须响应式，放弃
<area>，改用 SVG：<circle cx="120" cy="90" r="25"></circle>配合viewBox可自然缩放
usemap 和 map name 字符级匹配失败是最隐蔽的卡点
<img usemap="#hotmap"> 中的 #hotmap 必须和 <map name="hotmap"></map> 的 name 值**逐字符一致**：大小写、空格、有无 # 全部算在内。
调试时容易忽略的细节：
-
usemap="#hotmap "（末尾空格）≠name="hotmap" -
usemap="#HotMap"（大写 H/M）≠name="hotmap" - DevTools 中检查 DOM，确认
<map></map>节点存在且name属性值完全匹配usemap的#后部分 - 如果
<map></map>在 DOM 中找不到，说明它被 JS 移除、条件渲染未触发，或name拼写错误导致浏览器跳过解析
响应式场景下别指望 coords 自动适配
原生 <area> 的坐标系统是静态的。CSS 的 transform: scale()、zoom 或 object-fit: contain 都只影响渲染层，不重算坐标。热区偏移不是 bug，是规范如此。
能绕开的方案极少：
- 固定图片尺寸（如
width="800" height="400"），禁用任何缩放类 CSS - 用 JS 监听
resize，按比例重算coords并动态更新（但需同步维护原始图尺寸，复杂度陡增） - SVG 是目前最稳定的选择：坐标基于
viewBox，天然响应式，且支持无障碍属性（aria-label、role="link"）
实际项目里，90% 的“圆形点不中”问题，根源不在 shape 写法，而在 coords 坐标取错 + usemap/name 匹配失败 + 图片缩放三者叠加；其中后两者几乎无法从视觉判断，必须靠 DevTools 逐项核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
