usemap与map name必须逐字节完全匹配，大小写、连字符等均不可差；coords须按原始图尺寸严格书写，且area必须为map直接子元素、含href和alt；响应式下需JS动态重算坐标。
usemap 和 map name 必须逐字节匹配
热区点不动，八成卡在这儿。浏览器不报错，但 area 完全静默失效。
关键就一条：usemap="#floor-plan" 中的 #floor-plan 必须和 <map name="floor-plan"> 的 name 属性**完全一致**——大小写、连字符、空格、不可见字符，一个都不能差。
- ✅ 正确：
<img usemap="#product-map">+<map name="product-map"> - ❌ 错误：
usemap="product-map"（漏#）、usemap="#Product-Map"（大小写错）、usemap="#product_map"（下划线 ≠ 连字符） - 调试建议：Chrome 开发者工具中右键图片 → “检查”，看能否高亮到对应
<map>；不能高亮，基本就是匹配失败
coords 必须按原始图片尺寸书写，且格式严格
你用 CSS 把一张 1200×800 的图缩成 375px 宽显示，coords="0,0,100,100" 依然指原始图左上角 100×100 像素区域——现在它在屏幕上只占约 31×21px，远低于触控最小推荐尺寸。
coords 不是“随便填的坐标列表”，它由 shape 决定结构，填错就会失准甚至被忽略：
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上 + 右下，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点成对出现，总数必须是偶数；首尾点**不需要重复闭合**（浏览器自动连线），但交叉多边形渲染不可靠 - 坐标字符串里只允许数字和逗号，不能有空格、换行或中文逗号；从 Figma/Photoshop 导出后务必手动清理
area 必须是 map 的直接子元素，且 href、alt 不可省略
<area> 是空元素，不渲染、不响应事件，脱离 <map> 就彻底被浏览器忽略。
- ✅ 正确：
<map name="plan"><area shape="rect" coords="..." href="..." alt="..."></map> - ❌ 错误：
<map><div><area></div></map>（嵌套在<div>中）、<area>单独写在<body>里、或写成<area />（自闭合是无效的） -
href必须存在：可以是href="./detail.html"、href="javascript:void(0)"，但不能是空值或仅#（会触发页面跳动） -
alt是强制属性：不可为空字符串以外的缺失；应描述区域语义，比如alt="点击进入服务器机柜A1"，而非alt="链接"
响应式原型下必须用 JS 动态重算 coords
没有纯 HTML/CSS 方案能让 <area> 自适应缩放。只要图片用了 width: 100%、max-width 或 object-fit，热区必然错位。
唯一可靠解法是监听尺寸变化并重算坐标比例：
- 读取
img.naturalWidth/img.naturalHeight（原始尺寸）与img.clientWidth/img.clientHeight（当前渲染尺寸） - 计算缩放比：
scaleX = img.clientWidth / img.naturalWidth - 遍历所有
area，按shape类型分别处理：rect四个值都乘scaleX和scaleY，circle半径乘scaleX（或取均值），poly每对坐标分别缩放 - 绑定事件：
window.addEventListener('resize', updateCoords)和img.addEventListener('load', updateCoords)
真正复杂的地方不在写代码，而在于：poly 区域顶点多时，手动量坐标极易漏点或顺序错乱；缩放比在高 DPI 屏幕下还要叠加 devicePixelRatio；移动端 touch 事件触发区域比 mouse 更敏感，44×44px 物理像素是底线——这些细节不压平，原型交出去就会被质疑“点不准”。
