area标签必须嵌套在具有name属性的map内，且img的usemap值须为“#”加对应name；coords基于图片原始尺寸计算，缩放时需同比例调整；alt为必填属性，推荐补充aria-label以提升无障碍支持。
area 标签必须嵌套在 map 内部，且 map 要通过 name 关联 img
直接写 <area> 不生效，是因为它本身不渲染、不独立存在。必须满足两个硬性条件：<map></map> 有 name 属性，<img> 的 usemap 属性值为 "#xxx"（注意开头的 #），且 xxx 必须和 <map name="xxx"></map> 完全一致。
常见错误是漏掉 #，比如写成 usemap="mymap" 却配 <map name="mymap"></map> —— 浏览器会静默忽略，点击无反应，控制台也不报错。
<img src="plan.png" usemap="#floor1"><map name="floor1"><area shape="rect" coords="10,20,100,80" href="/room/a"></map>
coords 坐标系以图片左上角为原点，单位是像素
浏览器按图片原始尺寸（不是 CSS 缩放后的尺寸）计算 coords。如果用 CSS 把图片从 800×600 缩到 400×300 显示，但 coords 还按 800×600 写，热点区域就会偏移甚至错位。
解决办法只有两个：要么保持图片原始尺寸显示；要么按比例缩放 coords 值。比如原图宽高 800×600，CSS 缩放为 50%，那 coords="x1,y1,x2,y2" 就要全部除以 2。
-
shape="rect"：coords="left,top,right,bottom" -
shape="circle"：coords="center_x,center_y,radius" -
shape="poly"：coords="x1,y1,x2,y2,x3,y3,..."（至少 3 对坐标）
area 不支持 title 或 aria-label，无障碍需额外处理
<area> 标签无法通过 title 属性触发 tooltip，也不能被屏幕阅读器自然读出链接意图。单纯写 <area href="/kitchen" alt="厨房">，部分读屏软件可能只读 “链接”，不读 “厨房”。
更稳妥的做法是加 aria-label（尽管非标准但主流读屏支持），并确保 alt 不为空：
<area shape="rect" coords="200,150,350,280" href="/kitchen" alt="厨房" aria-label="前往厨房区域">
注意：alt 是必填属性，否则 WCAG 会报错；aria-label 是补充，不能替代 alt。
现代项目中 image map 的兼容性与维护成本问题
image map 在所有浏览器里都支持，包括 IE9+，但它有个硬伤：坐标绑定死在图片像素上。一旦图片重构、换尺寸、响应式布局变化，所有 coords 都得重算，没法自动适配。
如果项目需要响应式或后续频繁改图，建议用 SVG 替代：<svg></svg> 内嵌 <a></a> + <path></path>，配合 viewBox 和百分比坐标，天然响应式。但若只是静态小图、兼容老系统、或临时补丁，<map></map> + <area> 依然最快上手。
真正容易被忽略的是：**没有 JS 监听时，area 点击不会触发任何事件回调**——它只走原生跳转。想做埋点、防跳转、或动态高亮，得用 event.preventDefault() 拦截，再手动处理，这时不如直接上 SVG + JS 控制。
