rect适合按钮式热区，但需注意坐标系原点在左上角，且coords按原始图片尺寸定义，缩放后会失效；circle适合图标类热区，容错性高但要求图像无畸变；poly是唯一支持不规则轮廓的方案，维护成本高；default非万能fallback，慎用于关键交互。
rect 适合按钮式热区，但要注意坐标系原点
矩形区域最常用，比如产品图上几个并排的功能按钮、导航图里的楼层区块。它的 coords 是 x1,y1,x2,y2，左上角为原点——这点容易错：Photoshop 或截图工具默认显示的是“鼠标当前位置”，不是“从左上角起算的像素值”，得手动减去图片左上角偏移。如果图是居中或带 margin 的，直接抄坐标会偏移。
常见错误现象：area 点击区域明显右下偏移，或者根本点不中。这时候别急着改 JS，先检查 img 是否被 CSS 缩放过（比如设置了 width: 100%），因为 coords 是按原始图片尺寸写的，缩放后坐标就失效了。
- 只在固定尺寸、不缩放的图上用
rect最稳妥 - 若图宽高比会变（如响应式容器），必须配合 JS 动态重算坐标，或换 SVG
-
alt属性别空着，否则屏幕阅读器无法识别该区域功能
circle 适合图标/徽章类热区，半径容错性略高
圆形热区常用于头像、品牌 logo、状态指示器这类视觉中心明确的元素。coords 格式是 x,y,r，只要圆心和半径对，边缘点击误差影响小——相比 rect 四角对齐的严苛要求，它对坐标的微小偏差更宽容。
但注意：浏览器渲染时，circle 的判定是数学意义上的圆，不是“视觉上看起来像圆”。如果图片本身有透视变形（比如斜拍的产品图），用 circle 定义的热区会和实际视觉位置错位，这时得拆成 poly 或放弃图像映射。
- 适用于正视图、无畸变、尺寸稳定的图
- 圆心坐标建议用图像编辑软件的标尺工具精确定位，别靠目测
- 避免把多个
circle区域画得太近，否则 hover 时容易误触发相邻区域
poly 是唯一能处理不规则轮廓的方案，但维护成本最高
多边形热区是应对真实业务场景的兜底选择：电路板元件、人体解剖图、建筑平面图局部、汽车部件标注……这些没法用矩形或圆形准确覆盖。它的 coords 是一串顶点坐标，顺序必须闭合（首尾点一致或浏览器自动补），且顶点数不宜超过 50 个，否则某些老版本 Safari 会解析失败。
真正麻烦的不是写坐标，而是后续修改。一旦设计稿更新（比如调整了某个部件位置），所有相关 poly 的几十个点都要重采——没工具辅助基本靠猜。而且 poly 区域之间如果重叠，点击行为由 HTML 解析顺序决定（先定义的优先），这个逻辑很难直观调试。
- 优先用在线工具生成，比如 Image Map Generator，导出后手动校验首尾是否闭合
- 复杂图建议拆成多个简单
poly，比一个超大poly更易定位问题 - 务必用浏览器开发者工具的
Elements面板实时查看area边框是否贴合，别只信预览图
default 不是万能 fallback，慎用在交互关键路径
shape="default" 表示整个图片区域，相当于给整张图加一个链接。它常被当成“兜底跳转”加在 map 最后一行，但实际作用很有限：一旦前面定义了任何其他 area，default 就只覆盖未被其他形状覆盖的剩余区域——而多数设计图是满铺的，default 往往压根没生效空间。
更隐蔽的问题是可访问性：default 区域没有 alt，屏幕阅读器只会读“图片链接”，用户完全不知道点这里会做什么。如果这是主操作入口（比如“立即购买”按钮藏在图里），等于主动放弃无障碍支持。
- 仅在明确需要“非热区空白处跳转”时使用，比如地图上的“未标注区域→帮助页”
- 永远不要把它放在
area列表开头，否则可能拦截掉后面所有区域的点击 - 如果真需要全图可点，不如直接给
img外层包<a></a>，语义更清晰，兼容性更好
poly 精确描出了十个顶点，只要图片 CSS 里写了 max-width: 100%，所有热区在手机上就都偏了——这个坑，得在真机上点三遍才能确认。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
