必须配合和三者协同，coords参数顺序为x1,y1,x2,y2（左上→右下），所有坐标相对于图片原始尺寸左上角原点，CSS缩放不改变coords计算基准。

怎样用 的 shape="rect" 在图片上定义矩形热点

直接说结论：必须配合 和 三者协同，coords 参数顺序是 x1,y1,x2,y2（左上→右下），不是宽高，也不是中心点坐标。

coords 值怎么填才不会偏移或反向

常见错误是把 coords 当成「起点+宽高」或「中心+半宽半高」，结果热点错位甚至不响应。实际它只认两个角点的绝对像素坐标：

• coords="10,20,110,120" 表示矩形左上角在 (10,20)，右下角在 (110,120)，即宽=100、高=100
• 所有坐标都相对于图片左上角原点 (0,0)，和 CSS 中的 top/left 逻辑一致
• 如果图片被 CSS 缩放（比如 width: 50%）， 仍按原始尺寸计算——这是最常被忽略的坑
• 浏览器不校验 coords 是否越界，超出图片范围的区域点击无效，但也不会报错

为什么加了 usemap 还是没反应

根本原因通常是 HTML 结构或属性名拼写错误，而不是 shape 本身：

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

• 的 usemap 值必须以 # 开头，且与 的 name 完全一致（大小写敏感）
• 必须和 在同一文档内，不能跨 iframe 或外部文件引用
• shape="rect" 可省略（默认就是 rect），但 coords 绝对不可少；漏掉会整个 area 失效
• 部分旧版 Safari 对空格/换行敏感，建议把 写成单行：

要不要用现代方案替代

纯静态热点图且兼容 IE9+， 依然可靠；但遇到以下情况就该换思路：

• 图片响应式缩放（如 max-width: 100%）→ coords 无法自动适配，得用 JS 动态重算或改用 SVG
• 需要 hover 效果、圆角、阴影等视觉反馈 → 不支持样式，只能套
  + 绝对定位模拟
• 热点区域要支持触摸、拖拽或动画 → 原生 零交互能力，SVG 或 Canvas 更合适

真正难的从来不是写对 shape="rect"，而是让坐标在各种设备尺寸下始终对得准——这点连很多老手都会在上线后才发现偏了十几像素。