<p>usemap 和 map name 必须逐字节匹配，包括 # 符号、大小写、连字符与下划线，否则热区失效；area 必须嵌套在 map 内且含 href 才可交互；coords 基于原图像素，需 JS 动态适配缩放；poly 形状 coords 必须首尾重合。</p>
usemap 和 map name 必须逐字节匹配
热区失效最常见原因不是代码写错，而是 usemap 和 <map name> 之间差了一个字符：少 #、大小写不一致、连字符和下划线混用，浏览器就静默忽略整个 <map>。
正确写法只有这一种组合：
<img src="map.jpg" usemap="#product-map"><map name="product-map"></map>
以下全是错的：
-
usemap="product-map"（漏掉#） -
usemap="#Product-Map"（P大写） -
<map name="product_map">（下划线 ≠ 连字符）
调试时别靠眼睛扫，直接复制 usemap 的值，粘贴到开发者工具里搜索对应 <map name="...">，确认完全一致。
立即学习“前端免费学习笔记（深入）”；
area 标签必须嵌套在 map 内且不能省略 href
<area> 离开 <map> 就是无效 HTML；没有 href 的 <area> 不会响应点击——既不跳转，也不显示手型光标，更不会触发 click 事件（除非你手动绑定 JS 事件）。
常见错误场景：
- 把
<area>写在<map>外面，开发者工具里能看到元素但完全无交互 - 删掉
href想“禁用链接”，结果区域彻底不可点 - 忘了加
alt，可访问性审查失败，屏幕阅读器无法识别区域用途
最小可用结构长这样：
<img src="plan.jpg" usemap="#floor-plan"> <map name="floor-plan"> <area shape="rect" coords="10,20,100,80" href="/kitchen" alt="厨房区域"> </map>
coords 坐标基于原始图片像素，不随 CSS 缩放变化
你给 <img> 加了 width: 100% 或 max-width: 100%？那 coords 还是按原图尺寸算的。一张 1200×800 的图缩到 375px 宽，coords="0,0,100,100" 实际只覆盖左上角约 31×21px，远低于触控最小推荐尺寸 44×44px。
纯 HTML/CSS 没有自动适配方案。必须用 JS 动态重算：
- 监听
img.load和window.resize - 用
img.naturalWidth / img.offsetWidth得到缩放比 - 遍历所有
<area>，把coords字符串拆成数字，乘以比例后重新赋值
别依赖 jQuery 插件如 rwdimage maps，它已多年未维护，对现代 flex/grid 布局兼容差。
poly 形状的 coords 必须手动闭合
shape="poly" 不会自动把最后一个点连回第一个点。浏览器解析时只按顺序画线段，coords="10,20,30,40,50,60" 是两条线（10,20→30,40→50,60），不是三角形，点击行为不可靠，Safari 可能直接忽略。
正确写法是显式重复起点：
- 三角形：
coords="10,20,30,40,50,60,10,20" - 四边形：
coords="20,10,80,10,80,70,20,70,20,10"
用图像编辑器导出坐标后，务必检查并补全首尾重合；导出带换行或空格的坐标字符串，在 Safari 中会被静默跳过。
