area 标签必须嵌套在 map 元素内，且 img 需通过 usemap="#xxx" 关联同名 map；coords 基于原图像素，缩放后需 JS 动态重算，否则热区偏移失效。
area 标签必须嵌套在 map 里，且 img 要用 usemap 关联
单独写 <area> 不会生效——它不是独立元素，必须包裹在 <map name="xxx"> 中，同时对应图片的 <img> 标签需带 usemap="#xxx"（注意开头的 #）。name 和 usemap 的值必须完全一致，大小写敏感。
常见错误：漏掉 # 写成 usemap="floorplan"；或 <map name="floorplan"> 和 usemap="#Floorplan" 大小写不匹配；或把 <area> 写在 <map> 外面。
-
<area>必须闭合，不能写成自闭合形式<area />（HTML5 允许但部分旧浏览器不认） - 每个
<area>至少要带shape、coords、href（或onclick）三个属性才可能响应点击 -
alt属性虽非强制，但缺失会导致无障碍检测失败，屏幕阅读器无法识别该区域用途
rect/circle/poly 的 coords 格式和坐标原点必须对得上
coords 值不是 CSS 像素，而是基于原始图片尺寸的绝对像素坐标，原点在左上角 (0, 0)。如果图片被 width 或 max-width 缩放过，coords 仍按原图算，热区就会偏移甚至失效。
三种形状的 coords 写法差异明显，错一个数或逗号位置就无效：
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"（左上角 x/y，右下角 x/y） -
shape="circle"→coords="cx,cy,r"（圆心 x、y，半径 r） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（偶数个值，顺时针/逆时针列顶点） - 所有值之间只允许英文逗号，禁止空格：
coords="10,20,100,120"✅，coords="10, 20, 100, 120"❌
响应式页面里 area 热区会失效，得靠 JS 重算 coords
CSS 缩放图片时，<area> 的坐标不会自动适配——这是最常被忽略的兼容性陷阱。浏览器根本不读 width 或 height 样式去调整热区逻辑。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
解决办法只有两个：
- 用
<svg>替代<img> + <map>，矢量天然响应式（但需重构整张图） - 保留
<map>，加载后用 JS 读取图片原始宽高和当前渲染宽高，按比例缩放所有coords值并重写 DOM。常用库如rwdImageMaps就干这事，但要注意它依赖 jQuery 且不支持现代模块打包
纯 CSS 方案（比如 object-fit: contain）同样不改变 <area> 行为，必须介入 JS 计算。
调试 area 点击区域偏移的最快方法
别靠肉眼猜坐标。直接打开浏览器开发者工具，在 Elements 面板里选中 <area> 元素，右键 → “Reveal in Elements panel”，再看右侧 Styles 面板是否显示该区域已激活（Chrome 会高亮渲染范围）；若没反应，先检查控制台有没有报错，再确认 usemap 关联是否正确。
更准的办法是临时加一段 JS 把所有 <area> 对应的区域画出来：
document.querySelectorAll('area').forEach(a => {
const rect = a.getBoundingClientRect();
const div = document.createElement('div');
div.style.cssText = `position:fixed;outline:2px solid red;pointer-events:none;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;z-index:9999;`;
document.body.appendChild(div);
});
这段代码能直观暴露热区是否贴合目标位置——偏了？说明 coords 没按原图尺寸写，或者被缩放干扰了。
真正难的不是写对语法，而是让坐标在各种设备尺寸下都保持精准。这一步没法靠 HTML 自动完成，必须主动计算、主动验证。
