usemap="#map"不生效的最常见原因是usemap值与未严格匹配：必须带#前缀、大小写完全一致、无多余空格；coords基于原始图片像素，css缩放会导致热区偏移。
直接用 <map></map> + <area> 是最原生、零 JS、语义清晰的方案，但坐标必须严格匹配图片原始尺寸，且 usemap 属性值大小写敏感、必须带 # 前缀。
为什么 usemap="#Map" 不生效？
常见错误是 usemap 值与 <map name></map> 不一致——比如图片写 usemap="#myMap"，但 <map></map> 的 name 是 MyMap 或 my-map，浏览器会完全忽略。另外，usemap 的 # 绝对不能漏，也不能多加空格。
-
<img src="a.jpg" usemap="#nav">→ 对应<map name="nav"></map>（✅） -
<img src="a.jpg" usemap="nav">→ 缺#（❌） -
<img src="a.jpg" usemap="#Nav">→name="nav"时大小写不匹配（❌） - 图片被 CSS 缩放（如
width: 100%）后，coords仍按原始像素计算，会导致热点偏移（⚠️）
<area> 的 shape 和 coords 怎么配？
不同 shape 对应的 coords 格式固定，错一位整个区域就失效。坐标原点是图片左上角（0,0），单位为像素。
-
shape="rect"：需 4 个值，格式为x1,y1,x2,y2（左上角 + 右下角） -
shape="circle"：需 3 个值，格式为cx,cy,r（圆心 x、y + 半径） -
shape="poly"：需偶数个值，每对为一个顶点x1,y1,x2,y2,x3,y3,... - 所有坐标值之间用英文逗号分隔，不能有空格（
10,20,100,120✅；10, 20, 100, 120❌）
需要跳转到页面内锚点，href 怎么写？
<area> 的 href 支持标准 URL 语法，包括页面内锚点。注意锚点名必须与目标元素的 id 完全一致（大小写敏感），且不能带引号包裹在属性值里。
-
<area shape="rect" coords="0,0,100,50" href="#section1">→ 跳转到<div id="section1">（✅） <li> <code><area href="#Section1">→ 目标id="section1"时不触发（❌） -
<area href="'#section1'">→ 引号会被当 URL 一部分，导致 404（❌） - 若只想触发 JS 逻辑，用
href="javascript:void(0)"或href="#"+onclick，但后者需event.preventDefault()阻止跳顶 - 给容器设
position: relative - 子元素用
position: absolute; top: 20px; left: 30px; width: 80px; height: 40px; - 元素本身设
display: block并加cursor: pointer提示可点击 - 避免用
pointer-events: none在父层，否则子层点击也会被拦截
替代方案：纯 CSS 实现局部点击（无图片地图）
如果只是想让某个视觉区块响应点击，又不想用 <map></map>，更轻量的做法是用绝对定位的 <a></a> 或 <button></button> 覆盖指定区域。关键点是脱离文档流 + 精确尺寸 + z-index 控制层级。
这种方案绕过图片坐标依赖，适合动态布局或需要响应式适配的场景，但语义性弱于 <map></map>，无障碍支持需额外补 aria-label。
