area.coords 始终基于图片 naturalwidth/naturalheight 计算，与 css 缩放无关；usemap 必须严格为 "#name" 且 name 完全匹配 map 的 name；shape 类型决定 coords 缩放方式，poly 需逐坐标处理，alt 属性不可省略且须语义明确。
area.coords 坐标永远绑定 naturalWidth/naturalHeight
只要图片用了 width: 100%、max-width、transform: scale() 或任何 CSS 缩放手段，area 的热区就会“飘”——这不是 bug，是规范行为。coords 值始终按图片原始像素尺寸（即 img.naturalWidth 和 img.naturalHeight）计算，和 offsetWidth、clientWidth、getBoundingClientRect().width 完全无关。
常见错误现象：
- 鼠标悬停无手型，点击无响应
- 开发者工具里能看到
area元素，但getBoundingClientRect()返回{ width: 0, height: 0 } - 桌面调好 coords，一上移动端或缩放视口，热区就偏移几十像素
usemap="#name" 必须带 # 号，且 name 必须完全匹配
usemap 是片段标识符引用，不是普通属性值。写成 usemap="nav-map" 或 usemap="map/nav-map" 都会静默失效，浏览器根本不尝试绑定热区。
正确写法只有这一种：<img usemap="#nav-map"><map name="nav-map"></map>。漏掉 #、大小写不一致、空格多一个——全部无效。
检查建议：
- 用
document.querySelector('img[usemap]')确认 img 存在且usemap属性值带# - 用
document.querySelector(`map[name="${img.usemap.slice(1)}"]`)确认 map 存在且 name 完全一致 - 确保
area是map的直接子元素，不能包在div或section里
shape 类型决定 coords 解析方式，缩放时必须分类型处理
不同 shape 对应的 coords 格式差异很大，JS 动态缩放时不能一概而论：
-
shape="rect"：4 个值"x1,y1,x2,y2"→ x 方向乘scaleX，y 方向乘scaleY -
shape="circle"：3 个值"cx,cy,r"→cx、cy分别乘scaleX、scaleY，半径r应乘Math.min(scaleX, scaleY)（避免椭圆变形） -
shape="poly"：偶数个值"x1,y1,x2,y2,...,xn,yn"→ 所有偶数索引（x）乘scaleX，奇数索引（y）乘scaleY
别用正则粗暴全局替换数字——poly 坐标串里可能含负号或小数点，直接 .replace(/\d+/g, ...) 会错乱。
alt 属性不可省略，且不能为空字符串
area 的 alt 是强制属性，W3C 规范要求必须存在且有意义。写成 alt="" 虽能通过校验，但对屏幕阅读器毫无价值；写成 alt="点击此处" 属于反模式。
正确做法：
- 每个
area都要有明确语义的alt，例如alt="进入厨房区域详情" - 如果 href 是
javascript:void(0)，alt 应说明交互目的，而非跳转目标 - 不要依赖
title或aria-label——它们在area上被忽略，浏览器只读alt
真正难搞的是 poly 区域坐标的手动取点：原始图若没保留，缩放后重调 coords 几乎靠猜。不如早期就切 SVG —— viewBox 天然适配缩放，coords 支持百分比，连 JS 都不用写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
