HTML的+在响应式页面中坐标会偏移，因设计不支持缩放；usemap需带#号，name与id必须一致；coords须用原始像素值并按scaleX/scaleY动态换算；area必须含alt和href，响应式下需JS监听resize重算坐标。
纯 HTML 的 <map></map> + <area> 无法在响应式页面中可靠工作，坐标会偏移——这不是你代码写错了，是它设计上就不支持缩放。
usemap 属性为什么没反应？
最常见的是引用符号漏了 #：写成 usemap="myMap" 而不是 usemap="#myMap"。浏览器直接忽略整个映射逻辑，连报错都不会有。
<map></map> 的 name 必须和 usemap 值（去掉 # 后）完全一致；现代浏览器还要求同时设 id，否则旧版 Safari 或 IE 兼容模式下会失效。
<img src="a.jpg" usemap="#planetmap" alt="如何在HTML中完成图片区域映射" ><map name="planetmap" id="planetmap"></map>
coords 坐标填不对？确认三件事
所有 coords 都是原始图片像素值，原点在左上角 (0,0)，X 向右、Y 向下——这点和 CSS 的 top/left 一致，但和数学坐标系相反。
立即学习“前端免费学习笔记（深入）”；
别抄设计稿或 PS 里“缩放后”的坐标，必须换算回原始尺寸：coords 值 × img.naturalWidth / img.offsetWidth（横向）或 img.naturalHeight / img.offsetHeight（纵向）。
- 矩形
rect：coords="x1,y1,x2,y2"，顺序是「左、上、右、下」 - 圆形
circle：coords="cx,cy,r"，圆心 + 半径 - 多边形
poly：coords="x1,y1,x2,y2,x3,y3,..."，每对x,y是一个顶点
area 标签必须带 alt，否则就废了
缺 alt 不只是影响 SEO 或屏幕阅读器——旧版 Safari 会直接跳过该 <area>，点击无任何反应；语义缺失也让键盘用户无法聚焦操作。
href 也必须存在，否则点击不触发跳转；target="_blank" 要配 rel="noopener" 防安全风险。
- 正确写法：
<area shape="rect" coords="50,30,180,120" href="/east" alt="华东地区入口"> - 错误写法：
<area shape="rect" coords="50,30,180,120">（无href也无alt）
响应式下怎么让热区跟着图片动？
浏览器不会自动重算 coords，必须手动监听 img.load 和 window.resize，用 JS 动态更新每个 <area> 的 coords 属性。
核心逻辑是：拿到 img.naturalWidth / img.naturalHeight 和当前渲染宽高，算出 scaleX、scaleY，再按 shape 类型分别缩放坐标值——矩形要缩 4 个数，圆形缩圆心+半径，多边形逐对处理。
别自己从零写，用 rwdImageMaps 这类轻量 jQuery 插件，或抄一段 20 行以内的手写逻辑，但千万别跳过这步——否则移动端 90% 的点击都会错位。
