area标签shape="rect"的coords坐标必须严格按图片原始尺寸、以x1,y1,x2,y2格式填写，且仅接受4个整数逗号分隔；任何拼写错误、空格、多余数字或缩放后估算都会导致热区失效且不报错。
area 标签的 shape="rect" 坐标不是“算出来”的，而是必须按图片原始尺寸（naturalWidth/naturalHeight）手动填入的像素值；填错顺序、多一位少一位、当成宽高来写，热区就点不中，浏览器完全不报错。
rect 坐标格式必须是 x1,y1,x2,y2，不是 x,y,width,height
浏览器只认左上角 + 右下角两组坐标，中间不能有空格，也不能颠倒顺序：
-
coords="10,20,110,80"✅ 表示矩形从 (10,20) 到 (110,80)，宽 100px、高 60px -
coords="10,20,100,60"❌ 这是常见误写——把宽高当成了右下角坐标，实际右下角应是110,80 -
coords="10 20 110 80"❌ 含空格，整个coords被忽略，区域失效 -
coords="10,20,110,80,50"❌ 多了一个数，浏览器解析失败，热区不响应
坐标基准永远是图片原始尺寸，和 CSS 缩放无关
哪怕你用 width: 200px; height: 150px; 把一张 800×600 的图压扁显示，coords 仍要基于 800×600 填写：
- 原图 800×600，想标记右上角 100×100 区域 →
coords="700,0,800,100" - 如果按缩放后尺寸（200×150）去估算，填
"175,0,200,25"，那在高清屏或不同缩放比例下必然偏移 - 没有自动换算函数，
img.naturalWidth和img.naturalHeight是唯一可靠参考
调试 rect 热区无效时优先检查这三处
绝大多数“点不中”问题都出在这几个硬性规则上：
-
shape拼写必须是严格小写rect，写成Rect、rectangle或square都会被静默丢弃 -
coords必须且仅能有 4 个整数，用英文逗号分隔，不能有单位、不能有小数、不能有空格 - 确保该
area所属的map已通过usemap="#xxx"正确绑定到对应img，且map的name和id一致
最麻烦的是：所有错误都不报错，只是点击没反应。建议用 console.log(img.naturalWidth, img.naturalHeight) 先确认原始尺寸，再拿图像编辑器量坐标，最后逐字核对 coords 字符串——少一个逗号，整个区域就废了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
