area标签coords坐标必须以图片左上角为原点（0,0），x向右、y向下递增；图片拉伸或object-fit会导致失准，需保持img宽高与原始分辨率一致或用js动态缩放坐标。
area 标签的 coords 坐标怎么填才不偏移
坐标必须以图片左上角为原点（0,0），x 向右递增，y 向下递增——这是硬性规则，和 CSS 的 transform、position 无关，也和页面缩放无关。一旦图片被拉伸（width/height 强制设值）或使用 object-fit，coords 就会失准。
实操建议：
- 确保
<img>的width和height属性与原始图片分辨率一致，或完全不设，靠 CSS 控制尺寸（但此时需同步缩放 coords） - 用在线工具（如 https://www.php.cn/link/87ce599dc491a4e3543bc9c1d162352a）直接在图上拖选，它输出的就是原始像素坐标，可直接复制进
coords - 矩形热区写法必须是
coords="x1,y1,x2,y2"，不能写成"x1,x2,y1,y2"或漏掉任一值 - 多边形首尾点不必重复闭合，现代浏览器自动补全；但若手动写了重复点（如
x1,y1,x2,y2,x1,y1），也不报错
usemap 属性为什么绑定不上 map 元素
常见错误是 usemap 值和 <map></map> 的 name 不匹配，或漏了 # 符号。注意：usemap 必须带 #，而 <map name="front"></map> 的 name 值本身不含 #。
正确写法：
@@##@@ <map name="front"><area shape="rect" coords="10,20,100,80" id="tire-left"></map>
容易踩的坑：
-
<map></map>放在<img src="front.png" usemap="#front">后面没问题，但不能放在外（比如误塞进） - 某些旧版 IE 要求同时设置
id="front"和name="front"，稳妥起见建议两者都写 -
usemap是大小写敏感的，usemap="#Front"匹配不到name="front"
响应式页面里热区坐标怎么适配不同屏幕
原生 <map></map> 不支持百分比坐标，coords 只接受像素值，所以直接写死坐标在移动端必然错位。没有“自动适配”方案，只有两种务实路径：
- 放弃
<map></map>，改用绝对定位 +div图层覆盖：把图片设为背景，用position: absolute的子div模拟热区，配合calc(50% - 20px)等 CSS 计算实现响应式定位 - 保留
<map></map>，但 JS 动态重算 coords：监听resize，按图片实际渲染宽高与原始宽高的比例，重新设置每个<area>的coords属性（需缓存原始坐标） - 对简单场景（如仅矩形热区），可用
transform: scale()缩放整个<img>+<map></map>容器，但要注意触发重排和焦点事件兼容性
area 点击事件拿不到 event.target.id 怎么办
因为 <area> 是 void 元素，不渲染为 DOM 子树中的可视节点，很多浏览器（尤其 Safari 和旧 Edge）在事件冒泡中会跳过它，导致 event.target 实际指向 <map></map> 或 <img>，而非 <area> 自身。
可靠解法是用 event.currentTarget：
$('#front area').on('click', function(event) {
const area = event.currentTarget; // ✅ 这才是绑定事件的那个 <area>
console.log(area.id); // 正确输出
});
其他注意事项：
- 别用
$(this).attr('id')，jQuery 的this在事件委托中可能不稳定 - 如果用原生
addEventListener，同样优先取event.currentTarget，而非event.target - 为每个
<area>显式加id和alt，既方便 JS 获取，也提升可访问性
坐标系统本身不复杂，真正卡住人的永远是「图片变形了但 coords 没重算」和「以为 event.target 就是 area 结果拿到的是 img」这两处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
