area标签必须嵌套在map元素内并绑定img的usemap属性才生效;coords基于原图像素,css缩放会导致热区偏移;推荐保持原尺寸或改用svg;不支持原生click事件,需用href配合js模拟。

area 标签必须嵌套在 map 内,且需绑定 img 的 usemap
单独写 @#@#@#@#@#@#@#@#@#@0)导出坐标,别手算
<li>测试时打开浏览器开发者工具,勾选“Show all <code>area overlays”(Chrome DevTools > Rendering > Show area elements)直观查看热区是否覆盖准确
area 跨越镜像对称部件(如左右大灯),宁可拆成两个 area,否则坐标易出错且语义不清真正麻烦的不是写 area,而是当设计稿更新、图片重切、部件微调时,所有 coords 都得重新校准——这点比 SVG 或 Canvas 方案痛苦得多。

@@##@@ <map name="car-map"><area shape="poly" coords="120,80,150,60,180,80,160,110" href="#engine" alt="发动机"> <area shape="rect" coords="200,130,280,170" href="#door" alt="车门"></map>
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











