coords坐标原点在图片左上角（0,0），x向右、y向下递增；需用开发者工具获取left/top/width/height换算，按原始尺寸书写，shape与数值个数须严格匹配。
area 标签 coords 坐标怎么数才不偏移？
浏览器里 coords 的坐标原点在图片左上角（0, 0），X 向右递增，Y 向下递增——这点和 CSS 的 background-position 或 Canvas 不同，但很多人默认套用其他坐标系，结果热点总对不准。
实操建议：
- 用开发者工具的「截图选区」功能（Chrome/Firefox 都有）拖出矩形，直接看控制台显示的
left、top、width、height，换算成coords="x1,y1,x2,y2"：x1 = left，y1 = top，x2 = left + width，y2 = top + height - 别依赖图像编辑软件自带的“像素坐标”——Photoshop 的标尺默认从视图左上起算，但若画布有缩放或滚动偏移，数值就不可信
- 如果图片被 CSS 缩放过（比如
width: 100%; height: auto;），coords必须按原始尺寸写，浏览器会自动按比例映射；写错尺寸会导致热点严重漂移
circle 和 poly 形状的 coords 怎么写才不出错？
coords 的格式严格绑定 shape 属性值，写错类型或少一个数字，整个 <area> 就失效（不报错，但点击无响应）。
常见错误现象：
-
shape="circle"却写了 4 个数：coords="50,80,30,100"→ 实际只需 3 个：coords="50,80,30"（圆心 x, y, 半径 r） -
shape="poly"末尾多写逗号或空格：coords="10,20,50,30,40,80,"→ 浏览器可能截断最后一组，导致闭合失败 - poly 点数为奇数（如 5 个坐标）→ 每两个数是一组点，必须偶数个，否则最后一个数被丢弃
推荐做法：用数组形式先写好点序列，再拼成字符串，例如 [10,20,50,30,40,80,10,20]（首尾重合保证闭合），再 join 成 "10,20,50,30,40,80,10,20"。
响应式页面里 coords 还能用吗？
不能直接用。当图片随屏幕缩放时，coords 是固定像素值，不会自适应——这是 <map></map> 最大的硬伤。
可行方案只有两个：
- 禁用图片缩放：用
<img>的width和height属性固定尺寸（不是 CSS），确保渲染尺寸恒等于原始尺寸 - 完全放弃
<map></map>，改用绝对定位的透明<div> + <code>pointer-events: auto模拟热点，配合 JS 动态计算坐标（需监听resize和图片load）注意：CSS
transform: scale()会让coords映射彻底失准，连禁用缩放都救不了，必须避免。coords 值里能用小数或负数吗？
可以写小数（如
"10.5,20.0,50,30"），浏览器会四舍五入到整数；负数也合法（比如 poly 中某点在图片外），但超出图片边界的区域无法触发点击——这点常被忽略。实际影响：
- 小数对精度提升几乎无意义，因为鼠标事件本身就有 1px 采样误差
- 负坐标不会报错，但可能让部分浏览器（尤其旧版 IE/Edge）忽略该
<area> - 超大正数（如 x > 图片宽度）会被裁剪，但裁剪逻辑各浏览器不一致，不要依赖
真正关键的是：所有坐标必须基于图片原始分辨率，且 shape 类型与数字个数必须严格匹配——其余都是次要细节。
