使用 和 可为图片创建多热区链接，需 （含 usemap="#name"）、 和至少一个 共同配合；shape 与 coords 精确设定区域，支持 rect、circle、poly；须添加 alt 提升可访问性，注意坐标基于原始尺寸、大小写敏感及移动端适配。
使用 <map></map> 和 <area> 标签可以为一张图片的不同区域设置可点击的热区（image map），每个热区指向独立链接。关键在于图片与地图通过 usemap 属性关联，且 <area> 必须定义形状、坐标和目标地址。
基础结构：img + map + area 缺一不可
必须同时存在三个部分：<img>（带 usemap 属性）、<map></map>（带对应 name）、若干 <area>（定义热区）。usemap 的值需以 # 开头，与 <map name="xxx"></map> 中的 name 严格匹配。
<img src="plan.png" usemap="#building-map"><map name="building-map"></map><area shape="rect" coords="10,10,100,80" href="lobby.html" alt="大堂"><area shape="circle" coords="200,60,30" href="roof.html" alt="屋顶">
shape 与 coords：准确描述热区范围
shape 决定热区几何类型，coords 提供像素坐标（相对图片左上角原点）。常见组合：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
矩形（rect）：4个值 ——
left, top, right, bottom，如coords="50,30,180,120" -
圆形（circle）：3个值 ——
center-x, center-y, radius，如coords="120,90,25" -
多边形（poly）：至少3组
x,y坐标，用逗号分隔，如coords="10,20,40,30,35,80,5,70"
建议用图像编辑工具（如 Photoshop）或在线 map 工具辅助获取坐标，避免手动估算出错。
增强可用性与兼容性的实用技巧
仅靠默认行为不够友好，加入以下优化更稳妥：
- 为每个
<area>添加alt属性，提升无障碍访问支持 - 添加
target="_blank"控制新窗口打开（按需），如href="room201.html" target="_blank" - 用 CSS 配合
:hover模拟悬停效果（原生不支持样式），例如给<img>加style="max-width:90%" - 确保图片加载完成后再交互；若图片失败，
<map></map>将失效，可考虑降级方案（如用 div+绝对定位模拟）
注意浏览器行为与常见问题
现代浏览器均支持标准用法，但需留意：
-
usemap值大小写敏感，#Building-Map和#building-map不等价 -
<area>无闭合标签，不要写成 - 坐标单位是像素，且基于原始图片尺寸；缩放图片（如 CSS
width）会导致热区偏移，应优先用响应式 map 或 JavaScript 动态计算 - 移动端点击区域小，建议热区最小尺寸不小于 44×44px，并测试真机触控精度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
