原生图片热点应使用 <map> + <area>：<img> 需设 usemap="#my-map"，<map name="my-map"> 严格匹配；<area> 的 shape 和 coords 按渲染尺寸（非原始图）设定，禁用 CSS 缩放；pointer-events: none 不适用像素级控制；SVG 或背景图需换方案。
用 <map> + <area> 定义图片内精确可点击区域
图片上只有几个固定位置需要响应点击，其他区域不触发——不能靠 JS 算坐标再判断，那样体验差、维护难。原生方案是 <map> 与 <area> 配合 usemap 属性，浏览器直接识别几何区域，无需运行时计算。
关键点：
-
<img>必须带usemap属性，值为#my-map这类片段标识，且与<map name="my-map">的name严格一致（大小写敏感、无空格） -
<area>的shape支持rect、circle、poly；coords坐标系以图片左上角为原点，单位是像素，必须与图片实际渲染宽高完全匹配 - 若图片用 CSS 缩放（如
width: 100%），<area>坐标会失效——必须用width/height属性固定尺寸，或 JS 动态重算coords - 每个
<area>可独立设href或绑定onclick，但不要混用：href 触发跳转，onclick 执行 JS，二者同时存在时部分浏览器优先 href
为什么 pointer-events: none 不适合局部禁用点击
有人想“先让整图可点，再对非目标区域加 pointer-events: none”，这在语义和行为上都不可靠。
问题在于：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
pointer-events: none作用于整个元素盒模型，无法按像素级区域控制；你只能隐藏一块矩形/圆形区域，但<area>支持任意多边形 - 它会阻止所有事件（包括
mouseenter），导致 tooltip、hover 效果也失效，而<map>区域外默认就无响应，不影响其他交互 - 当图片有透明背景或复杂轮廓时，
pointer-events无法识别 Alpha 通道，而<area>坐标是明确的几何定义
<area> 的 coords 怎么测才准
手写坐标极易出错，尤其 poly 多边形。实操建议：
- 用浏览器 DevTools 选中
<img>，看右侧面板的 “Computed” → “width/height”，确认当前渲染尺寸（不是原始图片尺寸） - 打开开发者工具的 “Elements” 面板，右键
<img>→ “Reveal in Elements Panel”，然后用鼠标悬停在图片上，DevTools 会实时显示当前光标相对于图片左上角的坐标（Chrome/Firefox 均支持） - 对
rect：填x1,y1,x2,y2（左上、右下）；对circle：填cx,cy,r；对poly：按顺时针或逆时针顺序列出所有顶点x1,y1,x2,y2,x3,y3,... - 测试时务必在真实设备或响应式模拟器里验证，因为缩放、DPR、字体渲染差异会影响视觉对齐
动态图片或 SVG 场景下怎么替代 <map>
<map> 只适用于 <img> 标签，不支持 CSS 背景图、<picture> 或内联 SVG。此时必须换方案：
- SVG 内部直接用
<rect>、<circle>、<polygon>等图形元素，它们天然支持onclick和href，坐标系与 SVG viewBox 一致，无缩放失真 - 如果是 CSS 背景图，放弃像素级精度，改用语义化布局：把图片拆成多个带
id的容器，每个容器内放一个透明<a>或<button>，用position: absolute精确定位其左上角 - 绝对避免用 JS 监听整个图片的
click再手动比对clientX/clientY—— 在高 DPR 屏幕或滚动中容易偏移，且无法被屏幕阅读器识别
<area> 坐标必须来自同一上下文。哪怕只差 1px，点击热点就会漂移。 
