可用+实现图片热点，但usemap与map的name必须严格一致（前者带#，后者不带），coords坐标基于原始图片尺寸，缩放会导致失效；响应式场景推荐svg替代或固定尺寸+媒体查询，移动端热区需≥44×44px。
能用 <map></map> + <area> 实现，但必须严格匹配 usemap 和 name，且坐标基于原始图片尺寸——缩放图片会导致热点失效。
usemap 和 map 的 name 必须完全一致（含 #）
常见错误是 <img usemap="#myMap"> 对应 <map name="myMap"></map>，漏掉 # 或大小写不一致都会让整个映射静默失效。浏览器不会报错，但鼠标悬停无手型光标，点击也无反应。
务必检查：
-
usemap属性值以#开头，如#product-map -
<map></map>的name属性值**不含**#，如product-map - 二者字符串完全相等（空格、下划线、连字符都不能差）
coords 坐标必须按 shape 类型写对格式
坐标单位是像素，且始终相对于**原始图片尺寸**（不是 CSS 缩放后的尺寸）。一旦用 width / height 属性或 CSS 改变图片显示大小，coords 就会偏移。
三种常用 shape 的 coords 格式：
-
rect：左上角 x,y + 右下角 x,y，如coords="50,30,120,90" -
circle：圆心 x,y + 半径，如coords="200,150,40" -
poly：依次列出所有顶点 x,y，如coords="80,60,110,40,140,60,110,80"
注意：所有坐标从图片左上角 (0,0) 开始，Y 轴向下递增。
响应式页面中热区会偏移，怎么办
纯 HTML <map></map> 无法自动适配缩放。如果图片用了 width: 100% 或 max-width，热点大概率点不准。
可行方案有且只有两个：
- 用
<img>的原生width/height属性固定尺寸（禁用 CSS 缩放），再配合媒体查询切换不同尺寸的图片+对应<map></map> - 改用 SVG 替代：把图片作为
<image></image>嵌入 SVG，用<circle></circle>/<rect></rect>等元素定义可点击区域，天然支持缩放和响应式
JavaScript 动态重算 coords 是可行但高维护成本的路子，除非已有成熟库（如 image-map-resizer），否则不建议手动实现。
移动端点击体验差，最小热区要设够大
触控设备对小区域点击不友好。Apple 和 Google 的无障碍指南都建议：可点击区域最小物理尺寸不低于 44×44px。
这意味着：
- 圆形热区半径至少设为 22（
coords="x,y,22"） - 矩形热区宽高均不小于 44（
coords="x1,y1,x2,y2"中x2−x1 ≥ 44且y2−y1 ≥ 44） - 务必在真机上测试，模拟器容易误判触控精度
别只盯着桌面端效果，热区在手机上点不中，等于没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
