coords 必须基于图片原始像素尺寸而非 CSS 渲染尺寸，否则热区偏移；需监听图片加载与窗口缩放动态重映射坐标，并确保 area 标签包含 href 和 alt 属性以保障兼容性与可访问性。
coords 坐标必须基于原始图片像素，不是 CSS 渲染尺寸
你用 img { width: 50%; height: auto; } 缩放图片，area 标签里的 coords 值依然要按图片文件本身的 naturalWidth 和 naturalHeight 填写。否则热区会严重偏移——比如原图是 1600×900，渲染为 400×225，填 coords="0,0,200,150" 看似覆盖左上角四分之一，实际点击位置仍按 1600×900 计算，结果点不到。
常见错误现象：
– 开发时在桌面端看着准，移动端一缩放就点歪
– 设计稿给的是「缩放后坐标」，直接抄进 HTML 导致全错位
– 用 PS 或 image-map.net 取点，但没确认导出的是原始图尺寸下的值
- 临时加
border: 1px solid red到<img>，再用开发者工具「截图选区」比对坐标是否对齐 - 务必记录原始宽高：
const naturalW = img.naturalWidth; const naturalH = img.naturalHeight; - 计算缩放比：
const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH;
响应式下必须动态重映射 coords，不能靠 CSS 自适应
<map> 和 <area> 原生没有响应式能力。窗口 resize 或图片加载完成时，不手动更新 coords，移动端几乎必错位。
实操建议：
– 监听 img.addEventListener('load', updateCoords) 和 window.addEventListener('resize', updateCoords)
– 遍历所有 <area>，按 shape 类型分别处理：
• 矩形（rect）：缩放全部 4 个值（x1,y1,x2,y2）
• 圆形（circle）：缩放圆心 x/y + 半径 r
• 多边形（poly）：逐对缩放每组 x/y
立即学习“前端免费学习笔记（深入）”；
可直接用成熟方案节省时间：rwdImageMaps（jQuery 插件）或手写轻量版逻辑——但别跳过这步，否则热区失效就是静默失败，用户根本不会报错，只会觉得“点不动”。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
area 标签缺 href 或 alt 会导致语义与兼容性双崩
<area> 必须含 href 和 alt，否则行为不可靠：
- 缺
href：点击无跳转行为（即使绑了 JSclick事件，某些旧浏览器也拒绝触发） - 缺
alt：屏幕阅读器无法读出功能；更关键的是，旧版 Safari（iOS 14 及更早）会直接忽略该<area>
使用场景：
– 如果只是想触发 JS 行为，href 可设为 javascript:void(0) 或 #（但需 event.preventDefault()）
– alt 必须有意义，例如 alt="开始游戏区域"，不能留空或填占位符
用 background-image 替代 <img> + useMap 是更稳的替代路径
如果你的图片本质是装饰性、非语义化（如背景图、场景图），且需要叠加多个交互区域，直接放弃 <img> + <map> 组合，改用 background-image + 绝对定位子元素更可控。
关键点：
– 把图片设为容器的 CSS 背景，用 background-size: 100% 100% 强制拉伸（禁用 cover 或 contain）
– 子元素（如 <div id="donut">）用 position: absolute + 百分比 top/left/width/height 锚定位置
– 这样所有尺寸都相对于容器，不再依赖原始像素，缩放时坐标系天然一致
容易被忽略的地方：
– 容器本身必须是 position: absolute 或 relative，不能让 <body> 承载背景（它有默认 margin，且 background-size: cover 的裁剪逻辑会破坏百分比定位基准）
– 必须显式设 user-select: none，否则拖拽背景会干扰点击
