结论：<map>+<area>最轻量兼容（IE9+），但仅适用于固定尺寸静态图片；遇缩放、响应式或拖拽编辑需换SVG或地图SDK。
直接说结论：用 <map> + <area> 是最轻量、兼容性最好（IE9+）的方案，但只适合固定尺寸图片和静态坐标；一旦图片缩放、响应式布局或需要拖拽编辑，就必须换 SVG 或地图 SDK。
怎么写 <map> 和 <area> 标签
核心是三件套：一张图、一个 <map> 定义热区集合、多个 <area> 描述具体区域。关键不是标签怎么拼，而是 usemap 和 name 必须严格一致，且带 # 前缀：
<img src="map.png" usemap="#cn-map">-
<map name="cn-map">—— 注意这里没# - 每个
<area>必须有shape（rect/circle/poly）、coords、href
比如北京区域用多边形：<area shape="poly" coords="120,80,135,75,140,90,125,95" href="./beijing.html">。坐标单位是像素，原点在左上角。
coords 坐标怎么取才准
坐标准不准，直接决定热区点不点得中。别手估，别截图量，用工具导出：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在线工具如 Image Map Generator 上传图后画区域，自动输出
coords - 本地用 VS Code 插件 “Image Map” 或浏览器插件 “Image Map Editor” 实时取点
-
poly的coords必须是偶数个整数，按顺时针或逆时针列顶点，首尾不重复（浏览器会自动闭合） - 矩形格式是
x1,y1,x2,y2（左上→右下），圆形是cx,cy,r（圆心x、y、半径）
常见错误：坐标超出图片宽高、逗号后多空格、用了小数或负数、poly 点数为奇数。
移动端和响应式下为什么点不准
因为 <area> 的 coords 是绝对像素值，不随 <img> 缩放重算。只要图片用了 width、height 或 CSS max-width，热区就偏移。
- 最稳做法：图片保持原始尺寸显示，用 CSS
background-image+div+ 绝对定位模拟热区（但失去原生href跳转） - 折中方案：用 JS 监听
resize，按缩放比例重算coords并动态写入<area>（需缓存原始坐标） - 真要响应式 + 拖拽 + 高亮？直接上
SVG或Leaflet，<map>不是为此设计的 - 移动端最小热区建议 ≥44×44px，否则点击易误触
href 跳转失败的几个硬坑
很多人写 href="#section1" 发现没反应——<area> 不支持纯锚点跳转，必须是有效 URL：
- ✅ 正确：
href="./page.html#detail"、href="https://example.com"、href="javascript:void(0)" - ❌ 失效：
href="#"、href=""、href="section1" - 如果想做 JS 交互，用
onclick更可靠，比如onclick="showInfo('shanghai')" -
alt属性不能省，它影响可访问性，屏幕阅读器靠这个读出区域含义
复杂点在于：坐标系是静态的、缩放不可逆、移动端适配无原生支持——这些不是 bug，是设计限制。选方案前先确认需求边界，比调半天 coords 更省时间。
