热区坐标必须基于原始图尺寸计算，缩放后失效；coords格式容错率极低，空格、标点、数字位数错误均导致区域静默失效；usemap与map name必须逐字节一致且name不含#、中文、空格等非法字符。
热区坐标必须基于原始图尺寸计算，缩放后失效
浏览器的 <map></map> 不懂响应式，它只认图片原始宽高。你用 max-width: 100% 或 width: 100vw 缩放图片，coords 坐标却还按原图像素填，点击区域必然偏移甚至完全错位。
常见错误现象：鼠标悬停无手型、点击跳转到错误位置、部分区域完全无法触发。
- 调试时先给
<img alt="HTML长图区域映射怎么切分？长页面热区规划流程" >加style="max-width:90%"，再用开发者工具「截图叠加」比对坐标落点 - 若必须响应式，放弃
<map></map>，改用<svg></svg>+<rect></rect>或 JS 动态重算缩放比（需监听resize和图片加载完成） - 导出长图时务必记录原始尺寸（如 1200×8000），所有
coords都从此基准出发
coords 格式错一个字符就整个区域消失
coords 看似简单，但解析极其脆弱：空格、中文逗号、少一位数字、多一个换行，都会让浏览器静默忽略该 <area>，且控制台不报错。
使用场景：矩形热区（shape="rect"）最常用，但多边形（shape="poly"）更灵活也更易翻车。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 矩形必须是四个整数：
"x1,y1,x2,y2"，例如"0,0,300,200"；"0, 0, 300, 200"（含空格）会失效 - 多边形必须偶数个数字，顶点顺序影响渲染：顺时针或逆时针都行，但自相交（如“蝴蝶形”）在旧版 Edge 和部分安卓 WebView 中不显示
- 不要用图像编辑器直接导出带空格的坐标字符串——手动清理或写脚本替换
usemap="#xxx" 和 map name="xxx" 必须逐字节一致
这是最常卡住的地方。浏览器对大小写、#、空格、特殊符号零容忍，错一个字符，整个热区映射就断联。
参数差异：HTML 中 usemap 值带 # 前缀，而 <map></map> 的 name 属性绝对不能带 #。
- ✅ 正确：
<img usemap="#floor-plan" alt="HTML长图区域映射怎么切分？长页面热区规划流程" >+<map name="floor-plan"></map> - ❌ 错误：
<img usemap="#floor-plan " alt="HTML长图区域映射怎么切分？长页面热区规划流程" >（末尾空格）、<map name="floor_plan"></map>（下划线）、<map name="#floor-plan"></map>（多了#） - name 值只能含小写字母、数字、短横线；禁止中文、空格、点号、下划线
- 页面有多个热区图时，每组
usemap/name必须全局唯一
长图切分不是拆图，而是逻辑区块坐标标注
别试图把一张长图切成多张小图再拼 CSS 定位——那样失去语义、不可访问、无法原生跳转，且 alt 文本和焦点管理全崩。
性能 / 兼容性影响：单张长图 + <map></map> 是最轻量方案，但要求所有热区坐标一次性算准；动态生成长图（如 Canvas 导出）必须在导出阶段同步记录每个区块的原始像素坐标，注入 HTML，不能靠 JS 运行时测量（Canvas 像素测量误差大、跨域限制多）。
- 用 Figma / Photoshop 打开原始长图，开启标尺和参考线，精确读取每个区块左上角 (x1,y1) 和右下角 (x2,y2)
- 每个子区域对应一个
<area>，href必须是有效 URL，#section1这种无效锚点不会跳转 - 复杂长图建议用
shape="poly"包裹不规则区域，但务必验证 Safari 和主流安卓 WebView 渲染一致性
真正麻烦的是坐标精度和命名一致性——这两点不盯死，其他都白搭。尤其多人协作时，原始图版本、坐标文档、HTML 中 name 值，三者必须严格同步，差一个字符或一个像素，热区就哑火。
