HTML中图片热点必须用配合实现，不支持背景图；响应式需JS动态重算坐标；替代方案是CSS绝对定位覆盖层；无障碍要求加alt或覆盖层用role="link"+aria-label。
用 <map></map> 和 <area> 定义图片热点区域
HTML 本身不支持直接给背景图（background-image）添加可点击区域——这是关键限制。必须改用 <img alt="如何使用HTML给背景图片添加可点击区域" > 标签加载图片，再配合 <map></map> 实现热点映射。
常见错误是试图对 div 设置 background-image 后加 <area>，这完全无效，因为 <area> 只能作用于带 usemap 属性的 <img alt="如何使用HTML给背景图片添加可点击区域" > 元素。
-
<img alt="如何使用HTML给背景图片添加可点击区域" >的src必须和<map></map>的name通过usemap="#xxx"关联（注意#符号） -
<area>的shape支持"rect"、"circle"、"poly"，坐标单位为像素，原点在左上角 -
href可写链接，onclick可绑定 JS 逻辑，但需注意移动端 click 延迟问题
响应式场景下坐标会失效？用 JS 动态重算
当图片缩放或容器尺寸变化时，<area> 的固定像素坐标立刻错位。纯 HTML/CSS 无法解决，必须用 JS 监听尺寸变化并重设 coords。
典型做法是：获取 <img alt="如何使用HTML给背景图片添加可点击区域" > 的自然宽高与当前渲染宽高，计算缩放比，再将原始坐标乘以该比例。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
window.resize频繁触发，可用ResizeObserver更精准监听图片父容器 - 原始坐标建议存在
data-属性里（如data-orig-coords="10,20,100,80"），避免硬编码在 JS 中 - 如果使用 CSS
object-fit: cover，需额外处理裁剪偏移，此时getBoundingClientRect()比单纯看offsetWidth更可靠
替代方案：CSS pointer-events + 绝对定位覆盖层
当热点区域不规则、数量多或需动画交互时，<map></map> 维护成本高。更灵活的方式是用透明 <div> 覆盖在图片上，靠 CSS 定位和 <code>pointer-events 控制点击穿透。
这种方案绕过坐标映射，直接操作 DOM，兼容性好且易调试。
- 外层容器设
position: relative，图片设position: absolute或普通流式布局 - 每个热点用
<div class="hotspot" style="position: absolute; top: 20%; left: 30%; width: 10%; height: 8%;">，百分比值便于响应式 <li>确保热点 <code>z-index高于图片，并设置pointer-events: auto；图片本身可设pointer-events: none避免误触 - 缺点：无法导出为标准图像热点，SEO 和无障碍支持弱于
<map></map> - 给
<area>加alt属性（必需），描述该区域用途，如alt="进入产品介绍页面" - 覆盖层方案中，用
role="link"+aria-label显式声明功能，避免只靠onclick - 所有热点区域应能用键盘
Tab聚焦，且有清晰焦点样式（:focus-visible）
无障碍与语义化不能忽略
无论用 <map></map> 还是覆盖层，屏幕阅读器用户需要明确知道这些区域的功能。仅靠视觉位置或图标不够。
坐标的精确性和可访问性往往被快速上线忽略，但一旦用户反馈“点不到”或“读屏器没反应”，回溯修改成本远高于初期预留属性。
