usemap属性必须带#前缀且name严格匹配，90%关联失败源于usemap写错；需usemap="#nav-map"对应，大小写、连字符等须逐字节一致，area须嵌套于map内并含href和alt。
usemap 属性必须带 # 前缀且 name 严格匹配
图片和地图关联失败，90% 是因为 usemap 写错了。浏览器只认 usemap="#nav-map" 这种写法，usemap="nav-map" 或 usemap="#Nav-Map" 都会断连。
实操建议：
-
usemap的值必须以#开头，且后面字符串要和<map name="xxx"></map>中的name完全一致（包括大小写、连字符、空格） - 推荐统一用小写字母 + 连字符命名，比如
name="product-section"→usemap="#product-section" - 为兼容 HTML5 和旧标准，可同时写
id和name：<map id="product-section" name="product-section"></map> - 检查方法：在 Chrome 里右键图片 → “检查”，看是否能高亮对应
<map></map>；不能高亮，说明没关联上
area 必须嵌套在 map 内部，且 href 和 alt 不可省略
<area> 是空元素，但不是随便放哪都行。它必须直接写在 <map></map> 标签内部，不能被 <div>、注释或 <code><script></script> 包裹，也不能放在 里——否则所有浏览器都会忽略它。
更关键的是两个属性缺一不可：
-
href：没这个，点击不跳转，JS 绑定的click事件在部分旧浏览器里也可能不触发 -
alt：没这个，屏幕阅读器跳过该热区，Chrome 控制台会报 warning，无障碍直接失效 -
shape和coords必须配对：比如shape="rect"要求coords是 4 个数字；shape="circle"要求 3 个；shape="poly"至少 6 个（即 3 个点）
coords 坐标永远按原图尺寸计算，不是显示尺寸
一张 1200×800 的图，用 CSS 缩成 600×400 显示，coords="0,0,100,100" 仍指原始左上角 100×100 像素区域——现在它只占屏幕上 50×50 像素，点起来必然偏移。
纯 HTML/CSS 没有自动适配机制，只有两种解法：
- 不让图片缩放：用
width/height属性固定为原图尺寸，靠外层容器控制显示大小（但可能拉伸） - 用 JS 动态重算：
img.naturalWidth/img.naturalHeight对比当前offsetWidth/offsetHeight，按比例修正每个<area>的coords - 注意：响应式页面中，
resize和load事件都要监听，否则窗口缩放后坐标就错位了
poly 形状的 coords 不自动闭合，首尾点要手动重复
shape="poly" 的 coords 列表不会自动把最后一个点连回第一个点。比如 coords="10,20,30,40,50,60" 只画出两条线段（10,20→30,40→50,60），不是三角形。
正确做法是显式重复起点：
- 三角形写成：
coords="10,20,30,40,50,60,10,20" - 四边形写成：
coords="10,20,30,40,50,60,70,80,10,20" - 漏掉闭合点，区域边界不完整，点击判定可能失效或不稳定
实际项目里最常卡住的不是语法写错，而是坐标系理解偏差和响应式适配缺失——尤其当设计师给的是压缩后的截图、而你用的是原始大图时，coords 值几乎肯定要重调。
