area标签的shape属性必须设为rect才能定义矩形区域；其coords需严格为4个像素坐标（x1,y1,x2,y2），按左上角与右下角顺序，原点在图片左上角，且不响应CSS缩放。
area标签的shape属性必须设为rect才能定义矩形区域
HTML中<area>本身不渲染任何内容，它依赖<map>和<img usemap>配合使用。矩形区域的关键是shape属性值必须为rect，否则浏览器不会按坐标解析——哪怕coords写了四个数字，shape="circle"或未声明时都会被忽略或误判。
常见错误是漏写shape，或拼错成rectangle（标准只认rect、circle、poly三种）。
-
coords顺序固定：左上角x, 左上角y, 右下角x, 右下角y（即x1,y1,x2,y2） - 坐标系原点在图片左上角，单位是像素，与图片实际尺寸严格对应
- 若图片缩放（如CSS设置了
width），<area>仍按原始尺寸计算，此时需用响应式方案或JavaScript动态重算
完整可运行的rect area示例（含map和usemap绑定）
下面是最小可行代码，直接保存为HTML即可测试点击效果：
<img src="example.jpg" alt="示例图" usemap="#mymap"> <map name="mymap"> <area shape="rect" coords="10,20,110,120" href="#" alt="矩形区域"> </map>
注意三点：
立即学习“前端免费学习笔记（深入）”；
-
usemap的值必须带#前缀，且与<map name>完全一致（大小写敏感） -
<map>可以放在<img>前或后，但不能嵌套在<img>内 -
href为空或#时点击无跳转，适合配合JS事件；若要跳转，确保href有效
coords坐标写错会导致区域完全失效或偏移
矩形coords必须是4个整数，顺序错乱或数量不对会直接让该<area>不可点击。比如coords="10,20,120"（少一个）或coords="20,10,120,110"（x/y颠倒）都可能使热点出现在意料之外的位置，甚至覆盖不到目标区域。
调试建议：
- 先用真实图片原始尺寸（如800×600）开发，避免缩放干扰
- 临时加一个半透明
<div>绝对定位覆盖验证坐标：style="position:absolute;top:20px;left:10px;width:100px;height:100px;background:rgba(255,0,0,0.2)" - Chrome开发者工具里无法直接高亮
<area>，得靠视觉对齐或console.log事件触发来确认
移动端点击热区小、边缘难触达怎么办
原生<area>在触摸设备上没有点击放大或容错机制，coords定义的像素级区域在小屏上极易点空。这不是语法问题，而是交互缺陷。
务实解法只有两个：
- 放弃
<area>，改用CSS定位+<div>模拟热点（可控性强，支持:active、手势等） - 保留
<area>但用JavaScript增强：监听click后检查event.clientX/clientY是否落在期望范围内，手动触发逻辑
别指望shape="rect"自动适配屏幕密度或添加padding——它就是纯坐标的硬匹配，这点容易被忽略。
