原生 + 是唯一零依赖标准方案，但需严格满足 usemap/name 精确匹配、coords 基于原始尺寸、area 必嵌套于 map 且含 href/alt、移动端热区≥44×44px 等约束，否则点击静默失效。
原生 <map></map> + <area> 是唯一标准、零依赖的实现方式，但必须严格满足坐标、命名、嵌套三重约束，否则点击静默失效。
usemap 和 map name 必须逐字节匹配
浏览器不会报错，但只要漏掉 #、大小写不一致、连字符/下划线混用，整个热区就完全没反应。鼠标悬停无手型，点击无跳转。
-
<img usemap="#floor-plan">必须对应<map name="floor-plan"></map>—— 不能是floor_plan、Floor-Plan或floor-plan（末尾空格） - Chrome DevTools 中右键图片 → “检查”，如果无法高亮到对应
<map></map>，基本可断定匹配失败 - 建议 name 值全小写、仅含字母数字和短横线，避免任何歧义
coords 坐标永远基于原始图片尺寸
哪怕你用 img { width: 50%; } 把一张 1200×800 的图缩成 600px 宽，coords="0,0,100,100" 仍指原始图左上角那 100×100 像素区域——现在它只占屏幕约 50×50px，点不准是必然的。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
shape="rect"→coords="x1,y1,x2,y2"：必须满足x1 且 <code>y1 ，顺序反了区域会消失 -
shape="circle"→coords="cx,cy,r"：半径r必须为正整数，0或负数无效 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,x1,y1"：顶点总数必须为偶数，首尾点需手动重复闭合 - 所有
coords值之间只能用英文逗号分隔，禁止空格：coords="10,20,30,40"✅，coords="10, 20, 30, 40"❌
area 必须嵌套在 map 内，且 href、alt 不可省略
<area> 是空元素，不能自闭合（<area> 无效），也不能放在 <div> 或 <code><section></section> 里——只要脱离 <map></map> 直接子节点位置，所有浏览器都会忽略它。
-
href必须是有效 URL：href="./room.html"或href="javascript:void(0)"可用；href="#"或href="#kitchen"在多数浏览器中会失效或触发页面跳动 -
alt是强制属性，不可为空字符串以外的缺失；应描述用途，如alt="点击进入主卧详情"，而非alt="链接" - 移动端热区物理尺寸建议 ≥ 44×44px，否则 iOS Safari 可能无响应——这意味着原始图中对应区域像素值也要按比例放大
响应式场景下 coords 不会自动适配，必须换方案
纯 HTML 无法解决缩放导致的坐标偏移。固定尺寸 + 媒体查询仅适用于有限断点；真正可靠的路径只有两条：
- 改用 SVG：
<svg></svg>内嵌<path></path>或<circle></circle>，天然支持百分比坐标和viewBox缩放 - 保留
<map></map>+ JS 动态重算：img.naturalWidth/naturalHeight获取原始尺寸，再按img.offsetWidth / img.naturalWidth比例修正所有coords值（注意要在图片加载完成后再执行）
别指望 CSS 或 transform 能让 <area> 跟着动——它的坐标系是硬编码进 HTML 解析器的，跟渲染层完全脱钩。
