area标签必须嵌套在map中并通过img的usemap属性关联才能生效，usemap值须以#开头且与map的name严格一致；shape推荐rect、circle或poly，coords需按原图像素精确测量；area不支持title提示，应使用aria-label增强无障碍访问。

area 标签必须嵌套在 map 里才能生效

单独写 <area> 标签浏览器完全忽略，它不是独立可交互元素。医院科室分布图要用 area 实现点击跳转，必须配对使用 map 和 img 的 usemap 属性。

常见错误是只写了 area，忘了声明 map 或漏掉 usemap 值的 # 前缀：

@@##@@
<map name="dept-map"><area shape="rect" coords="100,50,200,120" href="/dept/cardio"></map>

• usemap 的值必须以 # 开头，且和 <map name="..."></map> 中的 name 完全一致（大小写敏感）
• shape 推荐用 rect（矩形）、circle（圆形）或 poly（多边形），避免用 default —— 它不支持 href，只能配合 JavaScript
• 坐标系原点在图片左上角，coords 单位是像素，务必用实际截图量取，别靠目测

poly 形状适合不规则科室区域（比如儿科诊区带弧形走廊）

医院平面图里很多科室边界不是直角矩形，硬用 rect 会误触相邻区域。这时得用 poly，手动标出多边形顶点坐标。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

实操建议：

• 用截图工具（如 Windows Snipping Tool 或 macOS Preview）打开分布图，开启像素标尺，逐点记录坐标，格式为 x1,y1,x2,y2,x3,y3,...
• 坐标点顺序要顺时针或逆时针闭合，首尾点不必重复；浏览器会自动连线并封闭区域
• 如果某科室被柱子或楼梯隔开成两块，就写两个 <area>，别试图用一个 poly 跨越空白
• 移动端点击热区小，poly 点数不宜超过 12 个，否则 Safari 可能解析失败

area 不支持 title 提示但可以用 aria-label 补充无障碍信息

<area> 上加 title 属性在 Chrome/Firefox 里鼠标悬停不显示提示框，这是规范行为，不是 bug。想让视障用户或键盘导航者知道“这是放射科”，不能依赖 title。

• 必须加 aria-label="放射科"，屏幕阅读器能读出来
• 如果希望鼠标悬停也有文字提示，得用 CSS + span 浮层模拟，但注意这会增加 DOM 复杂度，且和 area 的热区不自动同步
• 别给 area 加 tabindex —— 它默认可聚焦，加了反而破坏语义
• 所有 area 必须有 href 或 onclick，否则会被屏幕阅读器跳过

IE11 及以下不支持 area 的 download 属性，跳转前下载 PDF 科室指南需降级处理

想让点击“检验科”直接下载 lab-guide.pdf，写 <area href="lab-guide.pdf" download> 在 IE11 里会变成跳转页面而非下载，因为 IE 不支持 download 属性。

• 兼容方案：用 onclick 触发 Blob + URL.createObjectURL 下载，但注意 IE11 需用 msSaveBlob
• 更稳妥的做法是统一跳转到一个中间页，比如 /download?file=lab-guide.pdf，后端设置 Content-Disposition: attachment
• 如果科室图是纯导航用途，优先用 href 跳转，下载类操作建议移到科室详情页内，降低 area 负担

实际部署时最容易被忽略的是图片缩放适配：用 img 的 width/height 缩放图片后，coords 坐标不会自动换算，必须按缩放比例重算。响应式页面里建议固定图片尺寸，或改用 SVG 替代 map+area 方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！