使用<map><area>实现图片热区需确保：图片原始尺寸固定；usemap="#xxx"与<map name="xxx">严格匹配（name无#、仅小写字母数字短横线）；coords基于原始大图精准计算；响应式下需动态缩放coords或改用SVG。
直接用 <map> + <area> 就能实现，但必须确保图片原始尺寸固定、usemap 与 name 严格匹配、coords 基于原始大图精准计算——否则热区点不中、跳转失效、移动端全错位。
usemap="#xxx" 和 map name="xxx" 怎么配才不报错
这是电商页面热区失效的头号原因：浏览器对大小写、空格、#前缀极其敏感，错一个字符就完全不工作。
-
<img usemap="#promo-banner">中的#promo-banner必须一字不差地对应<map name="promo-banner">的name值（注意：name里没有#） -
name值不能含空格、中文、特殊符号，只用小写字母、数字、短横线，比如promo-banner-2026安全，promo banner或promo_2026都可能出问题 - 同一页面多个热区图（比如 banner + product-grid），每个
usemap和name都必须唯一，不能复用同一组名称 - 控制台若报
Failed to load resource，大概率是<area href="#item1">这类无效锚点，应改为href="./product.html?id=1"或用 JS 拦截并阻止默认跳转
coords 怎么填才准？尤其拼接图/九宫格场景
电商活动页常见「一张大图含多个商品入口」，本质仍是单图映射，关键不是拆图，而是把每个子图在原始大图中的像素位置量准。
- 用 Figma / Photoshop 打开导出后的完整大图，以整张图左上角为 (0, 0)，量出每个商品区域的左上角 (x1, y1) 和右下角 (x2, y2)
- 每个
<area>写shape="rect"，coords填"x1,y1,x2,y2"，例如第一款手机区域是coords="42,87,215,230" - 不要用 CSS 定位多个小图模拟——那样无法语义化，
alt失效，无障碍访问失败，部分电商平台审核会直接拒掉 - 若大图由 Canvas 动态生成，必须在导出时记录各区块坐标，再注入 HTML；运行时用 JS 测量 DOM 尺寸不可靠，尤其加载未完成时
响应式下热区错位怎么办
<area coords> 是绝对像素值，一旦图片被 CSS 缩放（比如 width: 100%）、视口变化或高清屏渲染，热区立刻偏移。这不是 bug，是原生机制限制。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：给
<img>设置固定width和height属性（如width="1200" height="400"），禁用 CSS 缩放，适配移动端靠媒体查询切换不同尺寸图 - 动态方案：监听
window.resize和img.onload，用img.naturalWidth/img.naturalHeight与img.clientWidth/img.clientHeight算出缩放比，重写每个<area>的coords字符串（注意：coords属性可直接赋值字符串，但需按shape分支处理rect/circle/poly） - 更推荐方案：直接换 SVG。矢量图形天然响应式，坐标基于 viewBox，支持 CSS 动画、JS 事件委托、无障碍
<title>，复杂热区维护成本远低于反复调coords
真正卡住电商项目的，往往不是怎么写 <area>，而是坐标谁来量、量几次、错位后谁来调——建议把坐标提取步骤固化进设计交付流程，让设计师用 Figma 插件导出 JSON 坐标表，前端直接读取注入，避免手动抄错一位数导致整块区域失灵。
