用 <map> 和 <area> 定义图片可点击区域需 <img usemap="#name"> 关联 <map name="name">，其中 # 不可省略；<area> 仅支持 href 跳转，coords 坐标按 rect（4值）、circle（3值）、poly（偶数对）规则书写，且响应式下会失效。
怎么用 <map> 和 <area> 定义图片可点击区域
HTML 图片映射不是靠 JS 拦截坐标，而是原生语义化标记：先用 <img> 的 usemap 属性关联一个 <map>，再在 <map> 里用多个 <area> 描述不同形状的热区。
关键点是属性必须严格匹配：usemap 值要带 #，且和 <map name="xxx"> 的 name 一致。漏掉 # 或拼写不一致，整个映射就失效，但浏览器不会报错——这是最常踩的静默坑。
<img src="plan.png" usemap="#floor-map"><map name="floor-map"><area shape="rect" coords="10,20,100,80" href="/lobby"><area shape="circle" coords="200,150,30" href="/elevator">
coords 坐标怎么算？矩形、圆形、多边形规则完全不同
坐标系原点在图片左上角（0,0），单位是像素，但每种 shape 的 coords 参数个数和含义都不同：
-
shape="rect"：4 个值，x1,y1,x2,y2（左上 + 右下） -
shape="circle"：3 个值，center-x,center-y,radius -
shape="poly"：偶数个值，按顺序两两成对，x1,y1,x2,y2,x3,y3,...，首尾不自动闭合
工具辅助建议：直接在浏览器开发者工具里打开图片，用截图测距插件量像素；别手算，尤其多边形区域——少一个数字或逗号位置错，区域就偏移或消失。
立即学习“前端免费学习笔记（深入）”；
为什么点了没反应？检查这三处硬性限制
<area> 不支持 onclick 或其他事件绑定，只响应原生跳转（href）或表单提交（formaction）。常见失效原因：
- 图片路径 404 或跨域：映射依赖图片加载完成，图片没出来，
<area>形同虚设 -
<map>放在<body>外或 DOM 顺序错：它必须在<img>同一文档流中，且不能被display:none父容器包裹 - 使用了
target="_blank"但没加rel="noopener"：现代浏览器会静默拦截，表现为点击无反应
响应式页面里 <map> 会失效吗？
会。因为 coords 是绝对像素值，图片缩放后热区位置完全错位。没有自动适配机制，也不能用 CSS 百分比。
真要响应式，只有两个靠谱办法：
- 用 SVG 替代：
<svg>内部<a>+<path>天然响应式，且支持伪类、过渡、JS 交互 - 服务端生成多套
coords：根据设备宽度返回对应尺寸图片 + 对应坐标，成本高，适合静态图谱
别信“用 JS 动态重算 coords”这种方案——图片加载时机、缩放比例获取、字体渲染差异都会导致计算漂移，线上环境极难稳定。
