usemap属性必须写为usemap="#mymap"且与严格匹配；coords坐标基于图片原始尺寸，响应式缩放需动态换算或改用css绝对定位热区。
usemap 属性必须带 # 前缀，且 name 值严格匹配
图片要响应热点区域，usemap 属性不能只写 usemap="mymap"，必须写成 usemap="#mymap"；对应 <map></map> 标签则必须有 name="mymap"（大小写、下划线、连字符全都要一致）。浏览器不报错，但点击完全无效是这类配置错误的典型表现。
常见错误现象：
- 图片正常显示，鼠标悬停无手型光标
- 开发者工具里能看到
<area>元素，但点击无任何反应 - 把
name写成id或反过来，或漏掉#
coords 坐标按原始像素算，不随 CSS 缩放变化
横幅图如果用了 max-width: 100%、width: 100vw 或 object-fit，它的渲染尺寸很可能小于原图分辨率。但 <area coords> 仍按图片原始宽高（img.naturalWidth/naturalHeight）计算坐标——这会导致热点严重偏移。
解决办法只有两种：
- 用原始尺寸等比缩放图片（比如横幅图切出 1920×480 版本，CSS 不做缩放）
- 放弃
<map></map>，改用绝对定位 +<div> 热区（适合响应式横幅）<p>如果坚持用 <code><map></map>，务必用截图工具在未缩放状态下量坐标，或用 JS 动态换算：scaleX = img.clientWidth / img.naturalWidth，再对coords值逐个乘以比例（仅适用于简单 rect/circle）。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
rect/circle/poly 的 coords 格式不能混用
<area>的coords是纯字符串，浏览器不会校验格式，填错就直接失效。必须按shape类型严格写：-
shape="rect"→coords="10,20,100,80"（左上 x,y + 右下 x,y），不是"10,20,90,60"（宽高） -
shape="circle"→coords="200,150,30"（圆心 x,y + 半径），不是"200,150,230,180" -
shape="poly"→coords="50,60,80,40,110,60,100,90,60,90"（偶数个值，两两成顶点）
多边形尤其容易漏掉最后一个点闭合，但 HTML 不要求首尾重合，只要顶点顺序正确即可。
响应式横幅建议绕过
现代促销横幅基本都响应式，而
<map></map>天然不兼容缩放。更可靠的做法是：- 把横幅图设为
<div> 的 <code>background-image - 内部用
position: absolute的子<a></a>覆盖热点区域，通过top/left/width/height定位 - 配合
aspect-ratio或padding-top保持宽高比，避免拉伸 - 按钮类热区加
min-height: 44px和touch-action: manipulation，确保移动端可点
这样既能用媒体查询控制各断点下的热区位置，又能避免 coords 换算错误、DPR 偏移、Safari 渲染异常等问题。真正复杂的横幅（比如带动画、视差、多层叠加），
<map></map>几乎不可维护。 -
