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 且 <code>y1 -
shape="circle"→coords="cx,cy,r"，r得是正整数，不能是0或小数 - 用 Photoshop 或 image-map.net 取点时，务必确认导出坐标基于原始图尺寸
area 必须嵌套在 map 内，且 alt 不可省略
@#@#@#@#@#@#@#@#@#@1 库自动处理；复杂交互建议直接切 SVG，避免坐标维护成本
热区映射最脆弱的地方不在代码长度，而在那一串像素数字和两个字符串是否严丝合缝——漏掉一个 <code>#，填错一位坐标，或忘了 alt，整个区域就彻底失联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
