area标签必须嵌套在map中且img的usemap属性需匹配map的name，coords基于原图左上角像素坐标，shape仅支持rect/circle/poly，移动端体验差，复杂场景推荐svg或canvas替代。
area 标签必须配合 usemap 和 map 使用
单独写 <area> 没用，浏览器根本不会识别。它必须嵌套在 <map></map> 里，且对应图片的 usemap 属性要指向该 <map></map> 的 name。常见错误是漏掉 usemap="#xxx" 或写成 usemap="xxx"（少 #），或者 <map name="xxx"></map> 和 usemap 的值不一致。
正确结构长这样：
@@##@@ <map name="floormap"><area shape="rect" coords="10,20,100,80" href="#living" alt="客厅"> <area shape="circle" coords="200,150,30" href="#bedroom" alt="主卧"></map>
coords 坐标系以图片左上角为原点
所有 coords 值都是相对于图片左上角（0,0）的像素位置，不是页面坐标，也不是 CSS transform 后的位置。如果房型图被缩放（比如用 CSS 设置了 width: 100%），coords 依然按原始图片尺寸计算 —— 这是最常踩的坑。
- 方案一：用原始尺寸图片 + 固定宽高，避免缩放
- 方案二：用 JavaScript 动态换算坐标（需监听
resize和图片加载完成） - 方案三：改用 SVG 替代
<img src="floorplan.png" usemap="#floormap" alt="房型图"> + <map></map>，原生支持响应式
shape 只支持 rect/circle/poly，默认是 rect
shape 只能是 "rect"、"circle" 或 "poly"，没有椭圆、弧形或贝塞尔路径。复杂户型（比如 L 型厨房、斜角阳台）只能拆成多个 <area shape="poly">，手动列出所有顶点坐标。
例如一个五边形区域：<area shape="poly" coords="50,60,90,40,120,70,100,110,60,90" href="#kitchen" alt="厨房">
注意：coords 是 x,y 交替的数字序列，奇数位是 x，偶数位是 y；首尾点不用重复闭合 —— 浏览器自动闭合。
移动端点击热区小、易误触，需要额外处理
原生 <area> 在手机上点击反馈弱，热区又小（尤其小户型图），用户经常点不中。不能只靠 href 跳转，得加交互增强：
- 给每个
<area>加onfocus="this.blur()"防止 iOS 蓝框干扰 - 用
onclick触发自定义逻辑（比如弹出详情浮层），而不是纯跳转 - 配合
cursor: pointer和伪元素模拟 hover 效果（需用 JS 绑定事件，因为<area>不支持 :hover）
真正复杂的房型交互，建议直接用 SVG + <path></path> 或 Canvas，<area> 只适合静态、简单、PC 端为主的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
