图像地图需用<map>与<area>配合<img usemap>实现，usemap值必须带#前缀且与<map name>严格一致；<area>须在<map>内，href和alt为必需属性；坐标基于图片原始尺寸，缩放后会偏移；现代项目优先选用SVG替代。
怎么用 <map> 和 <area> 定义可点击区域
图像地图本质是给一张图划分多个热区，每个区域能单独响应点击。核心不是图片本身，而是 <map> 元素里一组 <area> 标签的坐标描述。
必须让 <img> 通过 usemap 属性关联到 <map>，且 usemap 的值要带 # 前缀，比如 usemap="#nav-map" 对应 <map name="nav-map">。漏掉 # 是最常见失败原因。
<area> 必须写在 <map> 内部，不能放外面；href 和 alt 是必需属性（否则无障碍和部分浏览器会忽略），shape 和 coords 决定区域形状和位置：
-
shape="rect"：coords="x1,y1,x2,y2"（左上+右下） -
shape="circle"：coords="cx,cy,r"（圆心 x,y + 半径） -
shape="poly"：coords="x1,y1,x2,y2,x3,y3,..."（至少 3 个点，首尾不自动闭合）
为什么点击没反应？检查这三处硬性约束
图像地图失效，90% 出在以下三点中的某一个：
立即学习“前端免费学习笔记（深入）”；
-
usemap值和<map name>不一致，注意大小写和符号（#top-map≠name="topmap"） - 图片加载失败或
src为空——图像地图依赖真实渲染的像素尺寸，<img>没显示出来，<area>坐标就无效 -
<map>放在了<body>外面，或者被 JS 动态移除过。它必须是文档流中有效的、未被隐藏的元素
Chrome 开发者工具里可以右键图片 → “检查”，确认 usemap 是否解析成功（能看到对应 <map> 高亮）；如果没高亮，说明关联失败。
coords 坐标是相对谁的？缩放后还准不准
<area> 的 coords 始终相对于原始图片的自然尺寸（即图片文件本身的宽高），不是 <img> 标签设置的 width/height 或 CSS 缩放后的尺寸。
这意味着：如果原图是 800×600，你用 CSS 把它缩成 400×300 显示，coords="0,0,100,100" 依然指原图左上角 100×100 区域，现在只占显示区域的四分之一——点起来会明显偏移。
解决办法只有两个：
- 用 JavaScript 按缩放比例重算
coords（需监听resize和图片加载完成） - 改用 SVG 替代图像地图——SVG 原生支持响应式坐标，且语义更清晰
纯 HTML/CSS 方案里没有自动适配缩放的机制，这点容易被忽略。
现代项目里还该用 <map> 吗
能不用就尽量不用。主要问题不在语法，而在维护性和兼容性：
- 坐标硬编码在 HTML 里，图片一换就得重量一遍所有
<area> - 移动端 touch 事件支持不稳定，尤其 iOS Safari 对小区域点击有最小尺寸限制（约 44×44px）
- 无障碍支持弱：
<area>的alt仅作为替代文本，无法添加 ARIA 标签或键盘焦点管理 - 和现代布局（Flex/Grid）混用时，定位偏移更难调试
真要保留图像交互逻辑，优先考虑用 <svg> 包裹 <image>，再用 <path> 或 <rect> 定义可点击区域——坐标自动随容器缩放，还能加 transition 和 JS 事件委托。
老系统迁移或静态宣传页里用 <map> 没问题，但新项目里，它基本是个“能跑就行”的遗留方案。
