usemap="#xxx"必须与的name属性完全一致（含大小写、连字符等），coords需按原始像素填写且响应式下须用JS动态重算缩放比，area必须含href和alt才具备语义与兼容性。
直接用 <map></map> + <area> 就能做，但必须基于原始图片像素坐标、usemap 和 name 逐字节匹配、且响应式下不缩放 coords 就必然错位。
usemap="#xxx" 和 map name="xxx" 怎么配才不报错
这是最常静默失败的环节：浏览器不报错，只当热区不存在。核心就一条——usemap 的值（带 #）必须和 <map name="xxx"></map> 的 name 属性**完全一致**，包括大小写、连字符、数字，不能多空格、不能有中文或下划线。
-
usemap="#floor-plan"✅ 对应<map name="floor-plan"></map> -
usemap="floor-plan"❌ 漏掉#，整个<map></map>被忽略 -
usemap="#Floor-Plan"❌ 大小写不一致，断连 -
<map name="floor_plan"></map>❌ 下划线 ≠ 连字符，不匹配
调试时别靠眼睛扫，复制 usemap 值，再右键检查 <map></map> 的 name，粘贴比对。
coords 坐标怎么填才准？矩形/圆形/多边形规则不同
所有 coords 都是整数像素值，起点为图片左上角 (0, 0)，单位不是百分比，也不随 CSS 缩放变化。填错格式或顺序，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角x1,y1+ 右下角x2,y2，必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心cx,cy+ 半径r，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，手动重复第一个点更稳妥（如"10,20,40,30,35,80,10,20"）
切忌把设计稿里“居中坐标”或标注尺寸直接当 coords 填——必须打开原始高清图（比如 2400×1600），用 Photoshop、Figma 或在线工具（如 image-map.net）量取真实像素位置。
高清图响应式下热区全偏移？JS 动态重算 coords 是唯一解
原生 <map></map> 没有响应式能力。只要图片用了 max-width: 100%、vw 或任何 CSS 缩放，热区就一定错位——因为 coords 始终按原始像素计算，而视觉区域已变小。
- 记录原始尺寸：
const naturalW = img.naturalWidth; const naturalH = img.naturalHeight; - 算缩放比：
const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH; - 遍历每个
<area>，按shape类型分别处理：
—rect：四个值都乘对应缩放比
—circle：cx×scaleX，cy×scaleY，r×Math.min(scaleX, scaleY)（避免拉伸）
—poly：每对x,y分别 ×scaleX/scaleY - 监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
不要指望 CSS 能修复，也不要依赖 jQuery 插件（如 rwdImageMaps）自动适配——它底层仍是这套逻辑，只是帮你封装了。真正容易被忽略的是：你得先确保图片加载完成，才能读到 naturalWidth；否则 naturalWidth 为 0，缩放比崩盘。
area 必须带 href 和 alt，否则语义与兼容性双崩
缺 href，点击无跳转行为；缺 alt，不仅屏幕阅读器无法读出功能，旧版 Safari 会直接忽略该 <area>。这不是可选项，是硬性要求。
-
href必须是有效地址：相对路径（"room201.html"）、绝对 URL（"https://example.com/kitchen"）、mailto:、tel:都可以；javascript:void(0)可用，但纯href="#"不触发默认行为 -
alt必须描述该区域用途，例如alt="主卧入口"或alt="卫生间开关"，不能留空或写“点击此处” - 如果要用 JS 完全接管（比如发请求、弹窗），记得在
onclick里调event.preventDefault()，否则页面可能闪动或跳空地址
最后提醒一句：如果你的高清图是 Canvas 导出、动态拼接或来自 CMS，千万别在前端靠 JS 测量坐标——导出时就要把各区块原始像素位置存下来，作为元数据注入 HTML。运行时测量，精度和稳定性都不可控。
