HTML 图像映射用 <map> 和 <area> 实现图片热点，需 <img usemap="#name"> 与 <map name="name"> 配对；<area> 支持 rect/circle/poly 三种形状，coords 按原始像素填写，响应式下需手动适配或换 SVG。
用 <map> 和 <area> 实现图片热点点击
直接在地图图片上划可点击区域，不用 JS 也能做，核心就是 HTML 原生的图像映射（image map）机制。关键不是“加点击事件”，而是把图片和一组坐标区域绑定起来。
必须配对使用：<img> 的 usemap 属性指向一个 <map> 元素，而 <map> 内用多个 <area> 定义不同形状的可点击区。浏览器原生支持，兼容性极好（IE6 都行）。
-
<map>的name必须和<img>的usemap值一致（注意：usemap值要带#，比如usemap="#city-map"，而<map name="city-map">不带#） -
<area>的shape只支持rect、circle、poly三种；coords坐标单位是像素，按图片原始尺寸写，不是 CSS 缩放后的尺寸 - 如果图片用了
width/height或 CSS 缩放，<area>坐标不会自动适配——这是最常踩的坑，要么用原始尺寸显示图片，要么用 JS 动态换算
coords 怎么填：矩形、圆形、多边形的区别
坐标顺序和 shape 强绑定，填错就点不中。浏览器只认数字序列，不校验合理性，所以画歪了也不会报错，只会“点不响”。
-
shape="rect"：coords="x1,y1,x2,y2"，左上角 + 右下角，两个点共 4 个值 -
shape="circle"：coords="cx,cy,r"，圆心 x、y 和半径，3 个值 -
shape="poly"：coords="x1,y1,x2,y2,x3,y3,..."，每对 xy 是一个顶点，至少 3 个点（6 个数字），首尾不需闭合
示例（北京城区粗略圈出）：
<area shape="poly" coords="210,150,235,140,250,160,240,180,215,175" href="/beijing" alt="北京市区">
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
响应式场景下 <area> 坐标失效怎么办
只要图片被 CSS 缩放（比如 max-width: 100%）、或设了 width 属性，原始 coords 就会偏移。没有自动缩放机制，必须手动处理。
- 最稳方案：用
<picture>或srcset提供多分辨率图片，每套<map>对应一个尺寸，通过媒体查询切换usemap值 - 轻量方案：用 JS 监听
resize，按图片当前offsetWidth / naturalWidth比例重算所有coords，再批量更新<area>的coords属性 - 绕过方案：放弃
<map>，改用绝对定位的透明<a>或<button>覆盖在图片上，用 CSS 控制位置和尺寸（适合区域少、形状简单）
为什么不用 SVG 替代？什么情况下该换
SVG 确实更灵活：路径任意、缩放无损、能用 CSS 伪类控制 hover/focus 样式、天然支持 ARIA。但迁移成本不低。
- 已有 PNG/JPG 地图图源？转 SVG 需重绘或矢量化，精度难保证
- 区域只是跳转链接，没交互动画或状态反馈？
<map>更轻、更语义化、SEO 友好 - 需要点击后高亮某区域、拖拽移动、或和地图 API（如 Leaflet）联动？那直接上 SVG 或 Canvas 更合适
真正容易被忽略的是焦点管理：<area> 支持 tabindex 和键盘访问，但默认不显示焦点框；如果要做无障碍，得加 CSS 规则 area:focus { outline: 2px solid #007aff; }，否则键盘用户根本不知道当前在哪块区域上。
