usemap 与 map 的 name 必须逐字节匹配，coords 坐标基于 naturalWidth/naturalHeight 计算且需 JS 动态重算，poly 热区需首尾闭合并清除空格，移动端热区物理尺寸应 ≥44×44px。
usemap 和 map 的 name 必须逐字节匹配，否则热区静默失效
轮播图里每张图都带 usemap，但只要其中一张的 usemap="#floorplan" 和对应 <map name="floorplan"></map> 字符不一致（比如大小写、空格、连字符/下划线混用），这张图的热区就完全点不动——浏览器不报错，也不提示，只让你反复测试无效。
常见踩坑点：
-
usemap="floorplan"漏了#→ 必须是usemap="#floorplan" -
<map name="FloorPlan"></map>与usemap="#floorplan"大小写不一致 → 全部统一小写 + 连字符，如usemap="#living-room"+<map name="living-room"></map> - 轮播组件动态插入 DOM 时，
<map></map>被插到<div class="carousel-inner"> 外层或 Shadow DOM 里 → 热区失效；必须确保 <code><map></map>和<img alt="HTML的area标签在自适应轮播图中保持热区同步" >在同一 DOM 上下文，且<map></map>不被包裹在<picture></picture>或<figure></figure>中coords 坐标永远绑定 naturalWidth/naturalHeight，CSS 缩放必错位
轮播图常用
width: 100%、max-width: 100%或object-fit: cover控制图片尺寸，但这对<area>完全无效：它的coords只认原始图的像素尺寸（img.naturalWidth/img.naturalHeight），不是屏幕渲染宽高。例如原始图 1200×800，
coords="100,100,200,200"是左上角一个 100×100 区域；缩放到 375px 宽后，该区域在屏幕上仅约 31×31px，远低于移动端触控最小推荐尺寸 44×44px，点中率极低。立即学习“前端免费学习笔记（深入）”；
轮播图特殊难点：
- 每张图 natural 尺寸可能不同（比如横图 vs 竖图），不能共用一套缩放比
- 轮播切换动画期间，
offsetWidth可能为 0 或未就绪，直接读会算出 NaN - 用
transform: scale()或zoom动态缩放图片？coords 依然不重映射——这些只改渲染，不触发热区坐标更新
轮播图中 area 坐标必须 JS 动态重算，且需监听 load + resize + slide 事件
纯 CSS 无解。唯一可行路径是：每次图片加载完成、窗口缩放、轮播切换后，重新计算当前显示图片的缩放比，并批量更新其所有
<area>的coords值。关键实操点：
- 监听
img.addEventListener('load', updateAreaCoords)：确保图片自然尺寸已知 - 监听
window.addEventListener('resize', updateAreaCoords)：响应式布局变化 - 监听轮播器的切换事件（如 Bootstrap 的
slid.bs.carousel或 Swiper 的slideChange）：切换后立即执行updateAreaCoords -
updateAreaCoords()内逻辑：
– 获取当前激活图片：const img = document.querySelector('.carousel-item.active img')
– 计算缩放比：const scaleX = img.naturalWidth / img.offsetWidth;（矩形热区用此值统一缩放 x/y；圆形热区半径建议用Math.min(scaleX, scaleY)）
– 遍历该图关联的<map></map>下所有<area>，用正则提取coords字符串中的数字，按shape类型分别处理并重赋值
poly 热区首尾点必须手动闭合，且坐标导出要清理空格和换行
轮播图常含复杂轮廓（如户型图墙体、地图省份），多用
shape="poly"。但浏览器对格式极其敏感：Safari 会静默跳过任何格式错误的<area>，导致整块区域不可点。必须做到：
-
coords中顶点必须成对出现，总数为偶数；首尾点需**重复书写**，即coords="x1,y1,x2,y2,x3,y3,x1,y1"，不能依赖浏览器自动闭合 - 设计稿导出坐标（如从 Figma、PS 插件）后，务必用正则
.replace(/\s+/g, '')清除所有空格、制表符、换行符；coords="10, 20, 30,40"中的空格会导致 Safari 忽略该区域 - 移动端真机测试时，检查热区物理像素尺寸是否 ≥ 44×44px：用
scaleX * (x2 - x1)和scaleY * (y2 - y1)算出实际屏幕尺寸，太小就扩大原始 coords 或改用 SVG
真正麻烦的不是写代码，而是每次轮播图换图、换尺寸、换设备，都要重新校验 natural 尺寸、缩放比、坐标字符串格式——漏掉任意一环，热区就消失得无声无息。
