area 标签必须嵌套在具有 name 属性的 map 元素内，usemap 值须为“#name”且与 map 的 name 匹配；coords 基于图片原始尺寸，css 缩放会导致热区错位；每个 area 必须有 alt 属性以满足可访问性要求。

area 标签必须嵌套在 map 内部，且 map 必须有 name 属性

浏览器只认 map 的 name 值和 img 的 usemap 值匹配时才激活热区。常见错误是漏写 name，或写成 id——usemap 不认 id，只认 name，且值前面要加 #。

正确写法示例：

@@##@@
<map name="floorplan"><area shape="rect" coords="10,20,100,80" href="kitchen.html"></map>

• usemap 的值是 "#floorplan"，不是 "floorplan" 或 "#floorplan-map"
• <area> 不能脱离 <map></map> 单独存在，否则完全无效
• 多个 <area> 可共存于一个 <map></map>，无需额外包裹

coords 坐标系以图片左上角为原点，单位是像素

coords 的取值依赖 shape 类型，且所有坐标都相对于图片原始尺寸（非 CSS 缩放后尺寸）。如果用 CSS 改变了图片显示大小，热区会错位。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• shape="rect"：需 4 个值，coords="left,top,right,bottom"
• shape="circle"：需 3 个值，coords="centerX,centerY,radius"
• shape="poly"：需偶数个值，按顺时针/逆时针列出顶点 x,y 对，如 "10,10,50,10,50,40,10,40"
• 浏览器不会校验 coords 是否越界，超出部分 simply 不响应点击

area 不支持 title 或 aria-label，无障碍需靠其他方式补足

<area> 元素本身不渲染任何内容，也不支持 title 属性（部分旧浏览器可能显示，但不可靠），更不支持 aria-label（会被忽略）。屏幕阅读器通常只读 alt 文本，但 <area> 没有 alt —— 它必须有 alt，W3C 规范强制要求。

• 每个 <area> 都必须带 alt 属性，哪怕只是空字符串：alt=""；否则不符合可访问性标准
• 想提供提示文字？只能靠 JS 监听 focus 或 mouseenter 动态插入 <div> 浮层，或用 <code>aria-describedby 指向页面中隐藏的描述文本
• 注意：若 <area> 有 href，alt 应说明跳转目标（如 alt="进入卫生间详情页"），而非“点击此处”这类无意义文案

响应式图片热区失效？别用 CSS 缩放，改用 JavaScript 动态计算 coords

只要图片用了 width: 100% 或 max-width，原始 coords 就会失准。CSS 缩放不改变图片固有尺寸，只改变渲染尺寸，而热区坐标始终绑定原始像素。

• 最稳妥方案：用 img 的 naturalWidth 和 naturalHeight，结合当前 offsetWidth/offsetHeight 算缩放比，再重设 area.coords
• 简单场景可改用 SVG 替代：<svg></svg> 内部 <a></a> + <rect></rect> 天然响应式，且支持完整 ARIA
• 切勿试图用媒体查询重写多套 coords——维护成本高，且无法覆盖所有设备缩放比例

热区逻辑看似简单，但坐标绑定、可访问性和响应式这三块，任一没对齐，用户就点不到。尤其是 alt 属性缺失和 CSS 缩放，线上最容易被忽略。