必须配合和三者协同，coords参数顺序为x1,y1,x2,y2（左上→右下），所有坐标相对于图片原始尺寸左上角原点，CSS缩放不改变coords计算基准。
怎样用 <area> 的 shape="rect" 在图片上定义矩形热点
直接说结论：必须配合 <map></map> 和 <img usemap alt="怎样在图片上定义矩形的热点链接_AREA标签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%），<area>仍按原始尺寸计算——这是最常被忽略的坑 - 浏览器不校验
coords是否越界，超出图片范围的区域点击无效，但也不会报错
为什么加了 usemap 还是没反应
根本原因通常是 HTML 结构或属性名拼写错误，而不是 shape 本身：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
<img alt="怎样在图片上定义矩形的热点链接_AREA标签SHAPE设为RECT" >的usemap值必须以#开头，且与<map name="xxx"></map>的name完全一致（大小写敏感） -
<map></map>必须和<img alt="怎样在图片上定义矩形的热点链接_AREA标签SHAPE设为RECT" >在同一文档内，不能跨 iframe 或外部文件引用 -
shape="rect"可省略（默认就是 rect），但coords绝对不可少；漏掉会整个 area 失效 - 部分旧版 Safari 对空格/换行敏感，建议把
<area>写成单行：<area shape="rect" coords="0,0,100,50" href="/page">
要不要用现代方案替代 <area>
纯静态热点图且兼容 IE9+，<area> 依然可靠；但遇到以下情况就该换思路：
- 图片响应式缩放（如
max-width: 100%）→coords无法自动适配，得用 JS 动态重算或改用 SVG - 需要 hover 效果、圆角、阴影等视觉反馈 →
<area>不支持样式，只能套<div> + 绝对定位模拟 <li>热点区域要支持触摸、拖拽或动画 → 原生 <code><area>零交互能力，SVG 或 Canvas 更合适
真正难的从来不是写对 shape="rect"，而是让坐标在各种设备尺寸下始终对得准——这点连很多老手都会在上线后才发现偏了十几像素。
