coords值必须严格匹配shape类型和图片原始像素尺寸：rect为x1,y1,x2,y2；circle为cx,cy,r；poly为成对坐标且至少三组；全为整数，不支持百分比；usemap与map的name须完全一致（含#和大小写）。

coords 值怎么填才不偏移

填错 coords 是热区失效最常见原因，不是“差不多就行”，而是必须严格匹配 shape 类型和图片原始像素尺寸。浏览器按规则解析，错一位就整个区域飘走。

关键点：

• shape="rect"：必须是 coords="x1,y1,x2,y2"，即左上角 + 右下角，不是中心点或宽高
• shape="circle"：必须是 coords="cx,cy,r"，半径是像素值，不是直径
• shape="poly"：坐标对必须成对出现，coords="x1,y1,x2,y2,x3,y3,..."，至少三组，首尾不自动闭合，但浏览器会连线闭合
• 所有值都是整数像素，相对图片左上角 (0,0)，不支持百分比、em、rem

usemap 和 map 的 name 必须完全一致

usemap 属性漏掉 # 或大小写不一致，热区直接不生效，连控制台都不会报错——浏览器默默忽略。

检查要点：

• 中的 #floor-map 必须和 的 name 完全相同（含大小写、连字符）
• 不能放在 或 外，必须在文档流中且与 同一页面
• 如果用 JS 动态插入 ，要确保它在 渲染后存在，否则首次加载时关联失败

图片缩放后 coords 全部错位怎么办

原生 不响应 CSS 缩放，max-width: 100%、vw、甚至 transform: scale() 都会让热区漂移。这不是 bug，是规范行为。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

可行解法只有两个方向：

• 固定图片尺寸：，并用 CSS 控制容器大小（如 max-width: 100% + height: auto），让图片本身不缩放
• JS 动态重算：window.addEventListener('resize', () => { /* 按当前渲染宽高 / 原始宽高 比例重设每个 area.coords */ })，注意防抖，避免频繁触发
• 更彻底的替代方案：改用 SVG， + 天然矢量缩放，无坐标漂移问题

area 点击没反应？先确认这三件事

area 本身不可见、不捕获事件，只在特定条件下触发跳转或 JS 行为。

必须满足：

• 必须嵌套在 内，单独写在 HTML 任意位置都无效
• 必须有 href（如 href="/beijing"）或 onclick，空 href="#" 在多数浏览器中不触发默认跳转
• 图片必须是 元素，不能是 background-image；也不能是懒加载未完成的状态（loading="lazy" 且尚未进入视口）

调试建议：右键检查 元素，确认 usemap 属性存在且带 #；再检查对应 是否被正确解析（开发者工具 Elements 面板里能看到子 ）。

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