轮播中无法使用传统图像映射，因其依赖图片原始尺寸和静态坐标，而轮播的transform移动、响应式缩放、DOM重建等操作会使热区错位失效；推荐用SVG热区或CSS+JS动态定位替代。
不能直接在轮播图片上做传统 <area> 图像映射，因为轮播会动态切换 <img alt="HTML轮播图片能做区域映射吗？特殊场景实现方案" > 元素或改变其位置/尺寸，导致固定像素坐标的 <map></map> 失效。
为什么 <usemap></usemap> 在轮播里基本不可用
图像映射依赖 <img alt="HTML轮播图片能做区域映射吗？特殊场景实现方案" > 的原始尺寸和静态坐标系，而轮播常见的实现方式会破坏这个前提：
- 多数轮播用
transform: translateX()或margin-left移动整个<div class="slides"> 容器，<code><img alt="HTML轮播图片能做区域映射吗？特殊场景实现方案" >本身没变，但视觉位置已偏移，<area>坐标仍锚定在原始位置 - 响应式轮播会随屏幕缩放重设图片宽高，但
<area>的coords是绝对像素值，不会自适应 - 轮播切换时可能销毁/重建
<img alt="HTML轮播图片能做区域映射吗？特殊场景实现方案" >节点（如 Vue/React 组件），<map></map>关联关系容易断裂 - 即使强行绑定，开发者工具里能看到
<area>热区“漂”在错位位置，点击无响应或触发错误区域 - 轮播容器需设
position: relative，SVG 层用position: absolute; top: 0; left: 0; width: 100%; height: 100% - 每组热区 SVG 写在独立
<svg></svg>中，轮播切换时只显示当前页对应的 SVG，隐藏其余 - SVG 内部坐标可用百分比（
viewBox+%单位）或 JS 动态计算，天然适配缩放 - 给每个
<path></path>加cursor: pointer和tabindex="0"，支持键盘聚焦与无障碍访问 - 为每张图维护一个配置对象，例如：
{ "image1.jpg": [{ type: "rect", x: 20, y: 30, w: 100, h: 80, href: "/product/a" }] } - 轮播切换后，JS 清空旧的热区
<div class="hotspot">，根据当前图片名查表生成新热区元素 <li>热区 <code><div> 用 <code>position: absolute定位，width/height按百分比设置（如width: 12%），配合transform: translate(-50%, -50%)居中对齐 - 监听轮播容器的
click事件，用event.target.classList.contains("hotspot")判断是否点中，再跳转 - 轮播自动播放时，用户快速连点箭头，可能触发两次切换，但热区 DOM 更新未完成，造成
href错配 - 图片加载延迟（尤其懒加载）会导致热区定位基于 0×0 尺寸计算，出现大面积偏移；必须等
img.naturalWidth > 0后再初始化热区 - 缩略图联动轮播（如 Swiper thumbs）时，主图切换和缩略图高亮是两个异步动作，热区更新时机必须卡在两者都稳定之后
- 服务端渲染（SSR）页面首次加载，JS 未执行前热区不可见也不可点，但 SEO 和可访问性要求至少保留语义化链接——建议 fallback 用带
aria-hidden="true"的<a></a>标签占位
替代方案：用 SVG 模拟可交互热区
把每张轮播图对应的热区定义为 SVG <path></path> 或 <rect></rect>，叠加在图片上方，并随轮播同步切换。关键点：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
更轻量的方案：CSS 区域 + JS 坐标映射
如果热区形状简单（矩形、圆形），放弃 <map></map>，改用 CSS 定位 + 事件委托：
立即学习“前端免费学习笔记（深入）”；
复杂场景必须注意的坑
真实项目中容易忽略但会导致线上故障的细节：
