area标签可实现商品图热点跳转，但必须严格满足四点：usemap与map的name逐字节匹配（含#）、coords基于原始图片尺寸、shape与coords格式完全对应、area必须嵌套在map内且带href和alt。
直接说结论：area 标签能实现商品图片热点跳转，但必须严格满足四点：usemap 与 map 的 name 逐字节匹配（含 #）、coords 基于原始图片尺寸、shape 和 coords 格式完全对应、每个 area 必须嵌套在 map 内且带 href 和 alt。漏一个就静默失效，浏览器不报错，只让你点不动。
usemap="#xxx" 和 map name="xxx" 必须逐字节一致
这是 90% 商品图热点失效的根源。不是“差不多就行”，而是大小写、连字符、空格、# 缺一不可。
-
usemap="#product-map"✅ 必须配<map name="product-map"> -
usemap="product-map"❌ 漏#，整个映射被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map id="product-map">❌usemap不认id，只认name
调试建议：在 Chrome 开发者工具中右键图片 → “检查”，看是否能高亮到对应 <map>；如果不能，基本就是匹配失败。别靠肉眼扫，复制粘贴比对。
shape 和 coords 格式必须严格配对
coords 不是“随便填的像素”，它由 shape 类型决定解析逻辑；填错一位，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0，不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,x1,y1"：顶点坐标成对出现，总数必须是偶数；首尾点需手动重复闭合，否则不是封闭区域 -
shape="default"别用：它会捕获所有未被其他area覆盖的点击，干扰调试
常见错误：把设计稿里“居中坐标”直接当 coords 填；或导出 poly 坐标时带了空格/换行，导致 Safari 静默跳过该区域。
响应式页面里 coords 一定会错位
coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要商品图用了 width: 100%、max-width: 100% 或在高 DPR 屏幕上渲染，热区立刻失准。
- 原始图是 1200×800，
coords="0,0,100,100"是左上角 100×100 区域；缩到 375px 宽后，该区域在屏幕上仅约 31×21px，远低于触控推荐最小尺寸 44×44px - 没有纯 HTML/CSS 方案能自动适配；唯一可靠解法是 JS 动态重算：
window.addEventListener('resize', updateCoords)+img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth与当前img.offsetWidth得到缩放比，再遍历所有area，把每个coords数值乘以比例后重新赋值 - 移动端尤其明显：测试务必在目标设备视口宽度下进行，别只在桌面调好就上线
area 必须嵌套在 map 内，且 href 和 alt 不可省略
area 是空元素，不能自闭合（<area /> 是错的），且必须作为 map 的直接子节点；放在 div 里、或写在 map 外，所有浏览器都会忽略它。
-
href必须是有效 URL：href="./detail.html#specs"或href="javascript:void(0)"都可以；纯href="#"或href="#section"在多数浏览器中会失效或触发页面跳动 -
alt是强制属性，不可为空字符串以外的缺失；屏幕阅读器靠它理解区域用途，比如alt="点击查看耳机参数"，而非alt="链接" -
area不支持title或aria-label；想提供提示文字？只能靠 JS 监听focus或mouseenter动态插入浮层，或用aria-describedby指向页面中隐藏的描述文本
复杂点在于：你得同时处理原始坐标采集、缩放比计算、多点动态重设、无障碍语义、移动端触控容差——任何一个环节松动，用户点不到商品详情，就等于功能没做。
