原生map+area实现图片热区需严格遵循规则：usemap与map的name必须逐字节匹配（含#号及大小写）；shape与coords格式须完全对应；coords基于原始尺寸，响应式需JS动态重算缩放比；area必须嵌套于map内且href、alt不可省略。
原生 map + area 能做图片热区，但必须严格按规则写；漏一个 #、坐标格式错一位、alt 缺失，热区就静默失效——浏览器不报错，只让你反复点不动。
usemap="#name" 和 map 的 name 必须逐字节匹配
这是最常卡住人的地方：usemap 值必须以 # 开头，且后面字符串要和 的 name 属性值完全一致（大小写、连字符、空格都算）。
-
usemap="#product-map"对应✅ -
usemap="product-map"（漏#）❌ 浏览器直接忽略整个map -
usemap="#Product-Map"对应❌ 大小写不一致，断连 - 建议统一用小写字母+连字符命名，避免歧义
area 的 shape 和 coords 格式必须严格对应
coords 不是“随便填的像素”，而是由 shape 决定的固定格式；填错会导致热区缩成一点、偏移到画布外，甚至覆盖整张图。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且y1 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,x1,y1"：顶点坐标成对出现，总数必须是偶数；首尾点需手动重复闭合，否则不是封闭区域 - 不要用
shape="default"做兜底——它会捕获所有未被其他area覆盖的点击，干扰调试
响应式页面里热区会错位，这不是 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 是个空元素，不能闭合（ 是错的），且必须作为子节点直接出现在 map 内部；放在 div 里、或写在 map 外，所有浏览器都会忽略它。
-
href是必需属性：没有它，点击不会触发跳转，部分旧浏览器甚至不会冒泡 click 事件 -
alt是必需属性：缺失时 Chrome 控制台报 warning，屏幕阅读器跳过该区域，无障碍直接失效 - 移动端测试务必真机验证：模拟器触控精度高，真机手指点击容易误判，热区边缘建议留至少 10px 间隙
- 避免区域重叠：多个
area坐标交叉时，浏览器按 DOM 顺序决定优先级，行为不可靠
真正难的不是写对第一组 area，而是当图片缩放、DPR 变化、窗口 resize 频繁发生时，还能让每个热区精准响应——这要求你始终清楚坐标来源、缩放路径和事件绑定时机，而不是依赖“看起来能点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
