轮播图映射区域本质是+配合usemap属性实现的可点击热区，仅适用于静态；绑定需三步：定义、加usemap="#id"、严格匹配；轮播切换时若尺寸或缩放变化会导致坐标错位，响应式需js重算coords或改用css+js方案。
什么是轮播图映射区域（image map）
轮播图上的“映射区域”本质是 <map></map> + <area> 配合 usemap 属性实现的可点击热区，不是 CSS 定位或 JS 坐标计算。它只对 <img> 有效，且轮播图必须是单张静态图片（或每次切换时动态替换 src 的 <img>），不能是 <canvas></canvas> 或多个重叠 <div> 拼成的动画效果。
<h3>怎么给轮播图 <code><img> 绑定 <map></map>
关键在三步：定义 <map></map>、给 <img> 加 usemap、确保 name 和 #id 匹配。常见错误是漏掉 # 或大小写不一致：
-
<img src="banner1.jpg" usemap="#promoMap">—— 注意usemap值带# -
<map name="promoMap"></map>——name属性不带#，且必须和usemap的值（去掉#后）完全一致 - 每个
<area>必须有shape（rect/circle/poly）和对应坐标coords，例如：<area shape="rect" coords="10,20,100,80" href="/shoes">
轮播切换时映射区域失效怎么办
如果用 JS 切换 <img> 的 src，<map></map> 本身不会失效，但容易踩两个坑：
- 新图片尺寸和原图不一致 →
coords坐标错位。解决办法：所有轮播图必须等宽高等比，或用响应式方案（见下条） - 用 CSS 动画缩放/位移了
<img>→ 像素坐标不再匹配。此时不能靠<map></map>，得改用绝对定位的透明<a></a>层或 SVG 热区 - 需要响应式？
<map></map>本身不支持百分比坐标。可行做法：监听window.resize，用 JS 按比例重算coords并更新<area>的coords属性
替代方案：为什么现在更推荐用 CSS + JS 实现热区
<map></map> 在现代商城中越来越少见，主要因为：
- 无法适配高清屏（
coords是物理像素，@2x 图会偏移） - 不支持 hover/focus 状态样式（
<area>不能加 class 或伪类） - 移动端 touch 事件支持差，且 Safari 对
<map></map>的 click 延迟明显 - 实际开发中，多数轮播图是用
<div> + <code>background-image实现的，根本没法用<map></map>更可控的做法：用
position: absolute在轮播容器内叠一层<a></a>，通过top/left/width/height定义热区，再用 JS 根据屏幕宽度动态调整这些值。
