usemap 与 map name 必须逐字节匹配（含#、大小写、连字符），coords 须按原始图片像素填写且满足格式要求，area 必须嵌套在 map 内并带 alt 属性，响应式需 JS 动态重算坐标。
usemap 和 map name 必须逐字节匹配
热区不响应，八成是 usemap 和 <map name></map> 没对上。浏览器不报错，只静默失效。
-
usemap值必须带#前缀，比如usemap="#product-map"；<map name="product-map"></map>的name不能带# - 大小写、连字符、空格都要完全一致：
product-map≠Product-Map≠product_map - 调试时别靠眼扫——复制
usemap值，再复制map的name，用编辑器比对
coords 坐标必须按原始图片像素填写
你看到的图片被 CSS 缩放过？没关系。coords 依然要填原始尺寸下的像素值，缩放不会自动换算。
- 原始图是
1200×800，你在页面里用width: 400px显示，那coords="0,0,200,150"实际映射的是原图左上角四分之一区域，不是你屏幕上看到的那块 -
shape="rect"→coords="x1,y1,x2,y2"，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"，r得是正整数，不能是0或小数 - 用 Photoshop 或 image-map.net 取点时，务必确认导出坐标基于原始图尺寸
area 必须嵌套在 map 内，且 alt 不可省略
<area> 是个“孤儿标签”：离开 <map> 就完全无效，浏览器直接忽略。
- 不能把
<area>放进<div>、<section>或其他容器里；它只能作为<map>的直接子元素 - 每个
<area>都得有alt属性，比如alt="点击进入耳机详情页"，否则影响可访问性和 SEO - 如果要用 JS 处理点击（比如弹窗、埋点），保留
href（哪怕写成href="javascript:void(0)"），再加onclick并调用event.preventDefault()
响应式下 coords 错位是必然的，得靠 JS 动态重算
只要图片用了 max-width: 100%、width: 100% 或任何 CSS 缩放，原生 coords 就会偏移——这不是 bug，是机制限制。
立即学习“前端免费学习笔记（深入）”；
- 临时验证方法：给
<img>加border: 1px solid red，再用开发者工具「截图选区」比对热区是否对齐 - 必须监听
window.resize和img.onload，读取img.naturalWidth/img.naturalHeight与当前渲染宽高比，重新计算每组coords - 简单场景可用 rwdImageMaps 库自动处理；复杂交互建议直接切 SVG，避免坐标维护成本
#，填错一位坐标，或忘了 alt，整个区域就彻底失联。 
