HTML 图像映射需严格匹配 usemap 与 map 的 name（含 #）、正确书写 coords 格式，且 coords 基于原始尺寸，响应式下须 JS 动态重算或改用 SVG。
直接用 <map></map> 和 <area> 就能实现，不需要 JS，但配对规则和坐标写法错一点就完全不响应——浏览器不会报错，只会让你点不动。
usemap 和 map 的 name 必须逐字节匹配
这是最常失效的原因：usemap 值必须带 #，且后面字符串要和 <map name=""></map> 的 name 完全一致（大小写、连字符、空格都算）。
-
<img usemap="#product-map" alt="HTML怎么创建图片区域映射" >✅ 对应<map name="product-map"></map> -
<img usemap="product-map" alt="HTML怎么创建图片区域映射" >❌ 漏了#，整个映射被忽略 -
<img usemap="#Product-Map" alt="HTML怎么创建图片区域映射" >❌ 大小写不一致，断连
建议统一用小写+连字符命名，比如 map-name，避免调试时反复怀疑是不是 JS 问题。
shape 和 coords 格式必须严格对应
coords 不是“大概填个像素”，而是由 shape 决定的固定格式；填错一位，热区就缩成一个点、飘到画布外，或覆盖整张图。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,x1,y1"：顶点坐标成对出现，总数必须是偶数；首尾点需手动重复闭合，否则不是封闭区域 - 别用
shape="default"做兜底——它会捕获所有未被其他<area>覆盖的点击，干扰调试
响应式下 coords 会失效，这不是 bug 是机制限制
<area> 的 coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片被缩放（比如 max-width: 100% 或 width: 50%），热区立刻偏移。
- 移动端尤其明显：一张 1200×800 的图缩到 375px 宽，
coords="0,0,100,100"实际只占屏幕约 31×21px，远低于触控推荐最小尺寸 44×44px - 纯 HTML/CSS 无自动适配能力；唯一可靠解法是 JS 动态重算：
window.addEventListener('resize', updateCoords)+img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth与当前img.offsetWidth得到缩放比，再遍历所有<area>，把每个coords数值乘以比例后重新赋值 - 如果项目已重度响应式，更推荐直接改用 SVG 矢量热区——天然支持缩放、可编程、易维护
area 必须嵌套在 map 内，且 href 和 alt 不可省略
<area> 是空元素，不能自闭合（<area> 是错的），且必须作为子节点直接出现在 <map></map> 内部。
- 每个
<area>必须有href（哪怕只是href="#"）和alt属性；缺一不可，否则热区静默失效 -
alt不仅保障可访问性（屏幕阅读器依赖），也影响 SEO，别写成空字符串或占位符 - 多个
<area>重叠时，DOM 顺序决定点击优先级——后面的覆盖前面的；调试时注意顺序，避免歧义
真正麻烦的不是写几行标签，而是坐标得靠图像编辑软件或在线工具手动量取，多边形尤其容易漏点、顺序错乱；一旦图片尺寸变更，所有 coords 都得重算——这种硬编码像素值的方式，在现代前端里基本只适合极简静态页或遗留系统维护。
