area标签无法直接实现遮罩引导，因其不渲染视觉内容且无盒模型；需结合其coords坐标解析后，用绝对定位div或clip-path生成真实遮罩层。
area 标签本身不能实现遮罩引导
<area> 是 <map> 的子元素，只用于定义图像映射的可点击区域，它不渲染任何可见内容，也没有 z-index、背景色或尺寸控制能力。想靠 <area> 直接“遮罩”页面某块区域，是行不通的——浏览器根本不把它当视觉元素处理。
常见错误现象：area 上加 style="background: rgba(0,0,0,0.5);" 完全无效；用 JavaScript 给 area 绑定 mouseenter 有时触发不稳定，因为它的热区只响应点击/焦点，且无盒模型。
真正能做局部遮罩引导的，是「用 <area> 提供坐标逻辑 + 独立 DOM 元素（如 <div>）做视觉遮罩」。关键在于把 <area> 当作坐标源，而不是渲染载体。
如何从 area 获取坐标并生成遮罩层
图像映射的 <area> 支持 shape="rect|circle|poly"，对应 coords 属性值不同。必须手动解析这些值，再转换为绝对定位所需的 left/top/width/height 或 clip-path。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"：coords="x1,y1,x2,y2"→ 遮罩left: x1px; top: y1px; width: (x2−x1)px; height: (y2−y1)px -
shape="circle"：coords="cx,cy,r"→ 用clip-path: circle(r at cx cy)更稳妥（注意单位需一致，建议统一转为像素） -
shape="poly"：coords="x1,y1,x2,y2,x3,y3,..."→ 必须构造clip-path: polygon(...)，坐标需按顺序拼接，且注意图像原始尺寸与当前显示尺寸的缩放比
别忘了获取图片实际渲染尺寸：img.naturalWidth / img.naturalHeight 对应原始图大小，img.offsetWidth / img.offsetHeight 是当前显示大小，缩放系数 = 显示尺寸 ÷ 原始尺寸。所有 coords 值都要乘这个系数，否则遮罩会偏移。
遮罩层 DOM 结构和样式要点
遮罩层必须覆盖在目标图片上方，且层级高于其他内容。推荐结构：
<div class="guide-container"> <img src="..." usemap="#mymap"> <div class="overlay-mask" style="display:none;"></div> <map name="mymap"><area shape="rect" coords="10,20,100,80" data-guide-id="step1"></map> </div>
关键样式规则：
-
.guide-container设position: relative -
.overlay-mask设position: absolute; top: 0; left: 0; pointer-events: none（避免挡住底层交互） - 遮罩背景用半透黑：
background: rgba(0,0,0,0.7)，再用clip-path或mask挖出高亮区域 - 如果兼容性要求高（IE），改用两个重叠
<div>：外层全遮罩 + 内层白色矩形 position:absolute 覆盖目标区域（模拟“挖空”）
JavaScript 初始化时容易漏掉的三件事
很多实现卡在初始化后遮罩不出现，大概率是以下任一环节没处理：
- 图片未加载完成就读取
offsetWidth—— 必须监听img.onload或用document.readyState === 'complete'后再计算 - 忽略父容器的
transform或scale影响定位 —— 若图片被 CSS 缩放（如transform: scale(0.8)），需额外校正坐标 - 动态插入的
<map>或<area>，DOM 查询时机太早 —— 用document.querySelector('map[name="mymap"] area')前确认 map 已挂载
最易被忽略的是响应式场景：窗口 resize 后图片尺寸变化，但遮罩坐标没重算。要么监听 resize 重新 apply，要么直接用 CSS container queries（较新）或 ResizeObserver 监听图片容器变化。
