usemap="#name"与必须逐字节严格匹配，漏#、大小写错、符号不一致均导致热区静默失效；coords需按shape格式精确填写并动态缩放；area须嵌套于map内且href、alt不可省。
usemap="#name" 和
90% 的热区点击无响应，根源就在这里。浏览器做的是严格字符串匹配，usemap 值漏掉 #、大小写错一位、连字符写成下划线，都会导致整个 <map></map> 被静默忽略。
常见错误示例：
-
usemap="product-map"❌ —— 缺#，完全不生效 -
usemap="#Product-Map"❌ ——P大写，而<map name="product-map"></map>是小写 -
<map id="product-map"></map>❌ ——usemap只认name，不认id
调试时别靠眼睛扫。右键图片 →「检查」→ 复制 usemap 值；再点开对应 <map></map> 元素，复制其 name 属性；用编辑器做纯文本比对——这是最可靠的方式。
coords 格式必须按 shape 类型严格填写
coords 不是“数字列表”，而是由 shape 决定的结构化坐标序列。填错格式，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
立即学习“前端免费学习笔记（深入）”；
关键规则：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，部分浏览器（如 Safari）会跳过格式错误的<area>
设计稿里标出的“居中坐标”不能直接抄；导出坐标时务必清理空格和换行——coords 中只允许数字和逗号。
响应式页面中 coords 必须 JS 动态重算
coords 永远绑定图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的宽高。只要图片被缩放（max-width: 100%、width: 50%、object-fit），热区立刻失准。
实操要点：
- 记录原始宽高：
const naturalW = img.naturalWidth; const naturalH = img.naturalHeight; - 计算缩放比：
const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH; - 遍历每个
<area>，按shape类型分别处理：rect缩放全部 4 个值，circle缩放圆心和半径，poly逐对缩放x/y - 监听两个事件：
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
没有纯 HTML/CSS 方案能自动适配；不加这步，移动端几乎必点不准。
area 必须嵌套在 map 内且 href、alt 不可省略
<area> 独立写在 <map></map> 外会被浏览器忽略；缺 href，点击无跳转行为；缺 alt，不仅屏幕阅读器无法识别，旧版 Safari 会直接跳过该区域。
必须满足的硬性条件：
-
<area>必须是<map></map>的直接子元素 -
href属性不可为空（哪怕只是href="#"） -
alt是语义必需项，不是可选描述，例如alt="点击进入华东地区详情" -
title虽非强制，但缺了就没有悬停提示，用户不知道点这里干啥
原生 <map></map>+<area> 是一套对书写精度零容忍的机制：错一个 #、少一位坐标、漏一个 alt，热区就静默失效，浏览器既不报错也不提示——这点最容易被忽略，也最难排查。
