原生<map>+<area>支持语义化图片热区，需usemap与<map name>一致且coords顺序正确；绝对定位覆盖适用于动态/复杂区域；单区域可直接绑定事件但需确保尺寸；触摸坐标需用getBoundingClientRect()校正。
用 <map> + <area> 实现语义化可点击区域
原生 HTML 就支持图片上定义多个可点击热区，不需要 JS 或额外 div 覆盖。关键在于 <img> 的 usemap 属性和配套的 <map> 标签。
常见错误是忘了写 name 和 usemap 的值要一致（注意开头的 #）；或者 <area> 的 coords 坐标顺序写反（x1,y1,x2,y2 对矩形，不是宽高）。
示例：
<img src="plan.jpg" alt="楼层平面图" usemap="#floor-map"> <map name="floor-map"> <area shape="rect" coords="10,20,100,80" href="/room-a" alt="A区"> <area shape="circle" coords="200,150,30" href="/lobby" alt="大堂"> </map>
注意：shape 支持 rect、circle、poly；coords 单位是像素，以图片左上角为原点；所有区域必须在图片自然尺寸内，否则无效。
立即学习“前端免费学习笔记（深入）”；
用绝对定位 <div> 覆盖整张图片
当需要动态生成区域、或区域形状复杂（比如不规则多边形）、或要加 hover 效果时，用 CSS 定位覆盖更灵活。
核心要点：
-
<img>父容器必须设position: relative - 覆盖层
<div>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必加
z-index: 1（确保盖在图片上），且<img>不要设z-index否则可能被压住 - 移动端需加
cursor: pointer显式提示可点击，否则部分安卓浏览器不触发click
如果图片有响应式缩放（如 max-width: 100%），覆盖层必须监听 resize 或用 ResizeObserver 动态更新尺寸——否则宽高会失配。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
用 object-fit: cover + <img> 自身绑定事件
如果整个图片就是单一可点击区域（比如 banner 图跳转），最简方案是直接给 <img> 绑定事件，但前提是它能撑满容器且不被拉伸变形。
常见陷阱：
- 只设
width: 100%但没设height: auto，导致图片高度塌陷，点击区域变小 - 父容器没设明确宽高，
object-fit失效（它只对“有渲染尺寸”的元素起作用） - 在 flex/grid 容器中，
<img>默认align-self: stretch，但若父项设了min-height: 0，会阻止拉伸
推荐结构：
<div class="img-container"> <img src="hero.jpg" alt="首页横幅" onclick="goToHome()"> </div>
.img-container {
width: 100%;
height: 400px; /* 必须有明确高度 */
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; /* 防止底部留白 */
}移动端触摸坐标换算容易错
如果要在图片上做“点击某点触发不同逻辑”（比如地图选点），不能直接用 event.clientX/clientY，因为图片可能被缩放、滚动、或用了 transform。
正确做法是：先获取图片在视口中的真实位置（getBoundingClientRect()），再减去偏移，最后按图片原始宽高做比例归一化。
关键代码片段：
img.addEventListener('click', (e) => {
const rect = img.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 注意：这里 x/y 是相对于图片显示区域的像素，不是原始图尺寸
// 若需映射到原始图坐标，还需乘以 img.naturalWidth / img.clientWidth
});特别注意：如果页面启用了 viewport 缩放或使用了 transform: scale()，上述计算会偏差；此时应优先用 img.naturalWidth/Height 和 img.width/height 做缩放比校正，而不是依赖 CSS 计算值。
