<p>usemap 属性值必须带 # 前缀（如 usemap="#product-map"），而 map 的 name 属性不能带 #（如 name="product-map"），大小写、符号、空格须完全一致，否则热区全部失效。</p>
usemap 和 map 的 name 必须严格配对，漏 # 就完全失效
浏览器不会报错，但图片上所有热区都点不动——这是最常遇到的问题。关键不是 JS 写没写，而是 HTML 层级的引用关系断了。
-
usemap属性值必须带#前缀，比如usemap="#product-map"；<map>的name属性绝对不能带#，只能是name="product-map" - 大小写、下划线、连字符全都要一致；写成
productMap或product-map（末尾多空格）都会失败 -
<map>必须和<img>在同一文档中，且不能嵌套在<img>里；建议放在<img>后面或同级 - 如果页面有多个
<map>，每个name必须唯一，且只被一张图引用
coords 坐标必须按原始像素填，缩放后不自动适配
你用 CSS 把图片缩到 50%，coords 还是按原图 1920×1080 算——点击位置会严重偏移。这不是 bug，是规范行为。
- 矩形
shape="rect"：填left,top,right,bottom，如coords="10,20,100,80"，不是宽高 - 圆形
shape="circle"：填centerX,centerY,radius，如coords="150,60,30" - 多边形
shape="poly"：顶点 x,y 成对列出，如coords="200,10,250,30,230,90"（3 个点 → 6 个数字），逗号间不能有空格 - 所有坐标原点是图片左上角
(0,0)，X 向右、Y 向下递增
想执行 JS 而非跳转？别靠 href + onclick 混用
写成 href="#" onclick="doSomething();" 却不阻止默认行为，结果页面跳到顶部——这种写法现在基本等于自埋雷。
- 要纯 JS 行为，直接去掉
href属性，改用事件监听：document.querySelector('area[data-id="cart"]').addEventListener('click', handler) - 如果保留
href又想拦截跳转，必须显式调用event.preventDefault()或返回false - 每个
<area>都必须有alt，否则屏幕阅读器无法识别区域用途，也影响 SEO -
target="_blank"要搭配rel="noopener"，否则存在安全风险
响应式场景下，原生 map 几乎不可靠，得换方案
只要图片用了 width: 100%、max-width: 100vw 或 object-fit，就别指望 <map> 自动适配。JS 动态重算 coords 是兜底手段，不是推荐路径。
立即学习“前端免费学习笔记（深入）”；
- 简单横幅：改用
background-image+position: absolute的<div>热区，用百分比定位（如top: 72.2%） - 复杂形状或需动画：用 SVG，把图片作为
<image>，再叠<path>或<polygon>，所有坐标天然随 viewBox 缩放 - 非要硬撑
<map>：监听img.onload和window.resize，用img.naturalWidth / img.clientWidth算缩放比，再遍历area.coords字符串逐个重赋值
实际项目里，真正卡住人的从来不是“怎么写”，而是“为什么写了却没反应”——多半是 usemap 少了 #，或者 coords 按缩放后截图量的，却没反向换算回原始像素。这两处不确认清楚，后面所有 JS 都白搭。
