coords属性单位仅为像素，需按图像原始尺寸设定，不支持CSS单位或负数；shape决定coords格式：rect为“x1,y1,x2,y2”，circle为“x,y,r”，poly为“x1,y1,x2,y2,...”；错位常因CSS缩放未换算坐标或usemap不匹配导致。
coords 属性的单位只有像素，没有其他单位
HTML <area> 标签的 coords 属性值**全部以像素（px）为单位**，且是相对于图像左上角 "0,0" 的绝对坐标。它不支持 em、rem、%、vh 等任何 CSS 单位，也不接受负数坐标（超出图像边界的坐标会被浏览器忽略）。
常见误解是认为 coords 能随图像缩放自适应——实际不会。如果 <img> 用 CSS 缩放（如 width: 50%），而 <area> 的 coords 仍按原图尺寸写，热点区域就会错位。
- 必须按图像原始尺寸（natural width/height）测量和填写坐标
- 若图像被 CSS 缩放，需按比例换算
coords值，或改用 SVG / JavaScript 方案替代 - 浏览器对超出图像边界坐标的处理是一致的：直接忽略，不报错也不警告
rect/circle/poly 三种 shape 对应的 coords 格式
coords 的具体格式完全取决于 shape 属性值，三者不能混用。写错格式会导致区域失效，但 HTML 验证器通常不报错，只能靠点击测试验证。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角两组坐标，顺序不能颠倒（例如"10,20,100,80"） -
shape="circle"→coords="x,y,r"：圆心 x、y 和半径 r，三者缺一不可（例如"60,75,25"） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：按顶点顺时针或逆时针顺序列出所有点，无需首尾重复（例如"20,30,90,25,85,88,15,92"）
注意：shape 不写默认为 "rect"，但此时 coords 仍必须是四数值格式，否则行为未定义。
用 Photoshop 获取 coords 坐标的实际操作要点
不用 Dreamweaver 也能准确定位，关键在信息面板和自由变换的配合使用，但容易因图层/缩放比例出错。
- 确保图像在 Photoshop 中 100% 显示（Ctrl+0），且信息面板单位设为“像素”（右键信息面板 → 单位与标尺 → 像素）
- 矩形区域：用选框工具拉出区域后，信息面板直接显示
X、Y、W、H；coords="X,Y,X+W,Y+H" - 圆形区域：用椭圆选框工具画正圆（Shift 拖拽），信息面板显示中心
X、Y和半径W/2；coords="X,Y,W/2" - 多边形区域：用钢笔工具描边后转选区，再在路径面板中导出坐标（需脚本辅助），手动记录顶点更可靠
切记：Photoshop 里看到的尺寸必须和 HTML 中 <img> 的 width、height 属性值一致，否则坐标会偏移。
coords 值被忽略的几个典型场景
明明写了 coords 却没响应点击，大概率不是语法错，而是这些隐性条件不满足：
-
<img>缺少usemap属性，或其值（如"#map1"）与<map name="map1">不匹配 -
<area>没有href或onclick，部分浏览器对无交互属性的区域不激活热区 - 图像加载失败（404）或跨域未配置 CORS，导致浏览器拒绝解析映射关系
- 多个
<area>坐标重叠时，DOM 中靠前的元素会遮挡后面的，即使视觉上后者在上层
调试建议：用浏览器开发者工具检查 <map> 是否被正确解析（Elements 面板中展开看子节点），再手动在控制台执行 document.querySelector('area').coords 看返回值是否符合预期。
