热区失效主因是usemap与map name不匹配、coords未按原图尺寸书写或area位置错误；必须确保usemap="#xxx"与map name="xxx"逐字节一致，coords严格对应原始像素，响应式需js动态重算，且href和alt不可省略。
直接用 <map></map> 和 <area> 就能实现，但 90% 的失效不是语法错，而是 usemap 和 name 没对上、coords 没按原图尺寸写、或者 <area> 被放错位置。
usemap="#xxx" 和 map name="xxx" 必须逐字节匹配
这是最常卡住人的点：浏览器不报错，只让热区静默失效。比如 usemap="#product-map" 必须对应 <map name="product-map"></map>，漏掉 #、大小写不一致（Product-Map vs product-map）、多一个空格，全都不行。
-
usemap值必须带#前缀，HTML5 不再允许省略（尽管部分浏览器兼容，但别赌） - 统一用小写字母 + 连字符命名，避免歧义，例如
name="floor-plan"配usemap="#floor-plan" -
<map></map>必须在内，不能放在或注释后，否则解析失败
shape 和 coords 格式必须严格对应原始图片像素
coords 不是“看着填”，而是按 shape 类型硬性规定的数字个数和含义，且所有值都基于图片原始宽高（img.naturalWidth），不是 CSS 渲染后的尺寸。
-
shape="rect"→coords="x1,y1,x2,y2"，要求x1 且 <code>y1 ，否则区域不可点击 -
shape="circle"→coords="cx,cy,r"，r必须为正整数，0或负数会失效 -
shape="poly"→coords必须是偶数个值，且首尾点要手动重复闭合，例如三角形写成coords="10,20,30,40,50,60,10,20"，不重复就不是封闭区域 - 坐标中不能有空格或中文逗号，只允许英文逗号分隔数字，例如
coords="10,20,30,40"✅，coords="10, 20, 30, 40"❌
响应式页面里热区错位？必须用 JS 动态重算 coords
只要图片用了 width: 100%、max-width 或任何 CSS 缩放，<area> 的 coords 就立刻偏移——这不是 bug，是原生机制限制。
- 缩放比 =
img.offsetWidth / img.naturalWidth（宽度方向），高度同理；需分别计算scaleX和scaleY - 监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords) - 遍历所有
<area>，把coords字符串拆成数字数组，乘以对应比例后四舍五入再拼回字符串 - 移动端尤其要注意：原始
coords="0,0,40,40"在缩放后可能只剩约 20×20px，低于触控最小推荐尺寸 44×44px，导致点不中
href 和 alt 是强制属性，不能省略
<area> 不是普通标签，缺 href 或 alt 会导致行为异常：没 href 就无法跳转，也没默认事件冒泡；没 alt 不仅影响无障碍，Chrome 控制台还会报 warning，部分旧浏览器直接禁用该区域。
-
href必须是有效 URL，#section-id单独写无效，得写成href="./index.html#section-id"或href="javascript:void(0)" -
alt不是可选提示，是语义必需，例如alt="点击进入厨房布局详情" - 想用 JS 处理点击，也建议保留
href+onclick组合，再在回调里调event.preventDefault()，否则键盘用户（Tab + 回车）无法触发 -
<area>必须嵌套在<map></map>内部，不能被<div> 包裹，也不能写在 <code><map></map>外面真正麻烦的从来不是写几行 HTML，而是坐标得按原始图算、缩放得靠 JS 补、命名大小写得盯死——这些细节一漏，热区就彻底消失，连控制台都不吭声。
