usemap与map name必须逐字节匹配，否则热区完全失效；shape仅支持rect/circle/poly/default四种值，coords格式和数量须严格对应；href需为有效url，alt为强制属性。
usemap 与 map name 必须逐字节匹配，否则热区完全失效
浏览器对 usemap 和 <map name=""></map> 的匹配是严格字符串比对，不加 #、大小写错一个字母、多一个空格，都会导致所有 <area> 静默失效——控制台不报错，点击也没反应。
正确写法只有两种等效形式（推荐统一用带 # 的）：
-
usemap="#product-map"+<map name="product-map"></map> -
usemap="product-map"+<map name="product-map"></map>（HTML5 允许，但旧版 Safari 可能不认）
常见踩坑点：
- 把
name写成id——usemap只认name，不读id -
usemap="#Product-map"对应<map name="product-map"></map>—— 大小写不一致 -
name值含中文、空格或特殊符号（如name="hot area"），浏览器会忽略整个<map></map>
shape 和 coords 格式必须精确对应，否则部分区域直接消失
shape 只接受 rect、circle、poly、default 四种值，拼错（比如写成 rectangle 或 round）会导致该 <area> 被浏览器跳过，且无提示。
每种 shape 对应的 coords 数量和顺序不能错：
-
shape="rect"：必须且仅能有 4 个整数，格式为"x1,y1,x2,y2"（左上角 + 右下角） -
shape="circle"：必须且仅能有 3 个整数，格式为"cx,cy,r"（圆心 x、y + 半径） -
shape="poly"：坐标数必须为偶数，格式为"x1,y1,x2,y2,x3,y3,..."，顶点按顺时针或逆时针顺序排列；自相交多边形在 IE/Edge 中可能不渲染
调试建议：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- Figma / Photoshop 导出坐标后，手动删掉所有空格和换行，只保留数字和逗号
- 临时给
<img>加style="max-width:90%"，再用浏览器“截图元素”功能比对坐标是否对齐原始图
href 必须是有效 URL，纯 #id 锚点基本不可用
<area href="https://www.php.cn/link/46ea2829233ac49c9801a48d6bcf43fc"> 在绝大多数浏览器中不会触发页面内跳转——这不是 bug，而是规范限制。浏览器会尝试发起一个 GET /https://www.php.cn/link/46ea2829233ac49c9801a48d6bcf43fc 请求，结果 404。
可行方案只有两种：
- 完整路径 + 锚点：
href="./page.htmlhttps://www.php.cn/link/46ea2829233ac49c9801a48d6bcf43fc"（相对路径）或href="https://example.com#contact"（绝对路径） - JavaScript 处理：
href="javascript:void(0)"配合onclick，例如：onclick="location.hash='https://www.php.cn/link/46ea2829233ac49c9801a48d6bcf43fc'; return false;"
注意：
-
href不能为空字符串或仅空格，否则链接失效 -
alt是强制属性，缺失会影响可访问性，部分屏幕阅读器会跳过该热区 - 移动端点击 poly 热区时若面积
图片缩放后热区错位？coords 不随 CSS 自适应
coords 基于图片原始像素尺寸（即 src 图像本身的宽高），CSS 缩放、max-width、object-fit 都不会自动换算坐标——缩放后热区位置必然偏移。
解决方式取决于场景复杂度：
- 简单响应式：用
picture+ 多套srcset图片，并为每张图单独配一套<area>坐标（适合固定几档尺寸） - 动态适配：监听
resize，用 JS 按比例重算coords（需缓存原始尺寸，实时计算缩放比） - 更稳妥替代：改用 SVG，
<svg><image></image></svg>+<path></path>或<polygon></polygon>，天然支持缩放和事件绑定
最容易被忽略的一点：如果 <img> 在 Shadow DOM 里，外部定义的 <map></map> 默认不可见——热区必然失效，必须把 <map></map> 也放进 Shadow DOM 内部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
