<map> 和 <area> 是 HTML 原生图片热点方案，通过 usemap 关联 <img> 与 <map name>，<area> 定义矩形、圆形或多边形可点击区域，坐标基于图片左上角像素值，不支持 CSS 样式。
什么是 <map> 和 <area>？
它们是 HTML 原生支持图片局部热点的方案，不需要 JS 就能实现不同区域点击跳转。核心逻辑是：用 <map> 定义一组可点击区域，每个 <area> 描述一个形状（矩形、圆形、多边形）及其目标链接。
关键点在于：<img> 必须通过 usemap 属性关联到 <map> 的 name，且二者值必须完全一致（注意开头的 # 只在 usemap 中出现）。
常见错误现象：Failed to load resource: the server responded with a status of 404 —— 很可能是 usemap="#myMap" 对应的 <map name="myMap"> 拼写不一致，或大小写不符（HTML 中 name 区分大小写）。
<area> 的 shape 和 coords 怎么填？
shape 决定区域形状，coords 是像素坐标，顺序和含义严格绑定：
-
rect：左上 x,y + 右下 x,y（如coords="10,20,100,80"） -
circle：圆心 x,y + 半径 r（如coords="60,50,30"） -
poly：按顺时针/逆时针列出所有顶点 x,y（如coords="20,30,40,10,60,30,40,50"）
坐标原点是图片左上角（0,0），单位是像素。建议先用浏览器开发者工具截图+测量，或导出带坐标的 SVG 热区图再手动转成 poly 值。别凭感觉估算——差 5px 就可能点不中。
性能影响几乎为零，但 coords 过长（比如上百个点的多边形）会影响 HTML 可读性，此时建议改用 Canvas 或 SVG 方案。
为什么点击没反应？检查这几点
最常踩的坑不是语法错，而是隐式限制：
-
<img>必须有src，且图片能正常加载；404 图片下<area>无效 -
usemap值必须带#，而<map>的name不带（usemap="#navmap"→<map name="navmap">） -
<map>必须在<img>同一文档内，不能跨 iframe 或外部文件引用 -
<area>的href如果是相对路径，以当前 HTML 文件位置为基准，不是图片路径
兼容性没问题：Chrome/Firefox/Safari/Edge 全支持，连 IE9 都行。但注意移动端 Safari 在某些 iOS 版本中对 poly 的抗锯齿处理可能导致边缘 1–2px 失效，加 2px 冗余更稳妥。
能否给 <area> 加 CSS 样式或 hover 效果？
不能。原生 <area> 不是 DOM 可渲染节点，没有盒模型，:hover、background、border 全无效。想高亮反馈，只有两个办法：
- 用 JS 监听
mouseover/mouseout，动态在图片上层盖一个绝对定位的<div>（需同步计算坐标） - 放弃
<map>，改用 SVG<image>+<path>，后者天然支持 CSS 伪类和 transition
如果只是简单跳转，<map> 足够轻量；但只要涉及视觉反馈、动画、或响应式缩放（图片宽高变，coords 像素值就失效），它立刻变成维护噩梦。这时候别硬撑，SVG 是更现代的选择。
