HTML图片指定区域映射怎么写？代码实例快速参考-html教程-PHP中文网

和用于定义html图片的可点击区域映射；通过 usemap 属性绑定命名，其内用 shape 和 coords 指定形状与像素坐标，需严格匹配且基于原图尺寸，缩放会导致失效。

html图片指定区域映射怎么写？代码实例快速参考

什么是 `<map></map>` 和 `<area>`？

HTML 图片区域映射（image map）靠的是 <map></map> 元素配合 <area> 实现，不是给 <img> 加 class 或 style 就能生效的。核心逻辑是：图片本身用 usemap 属性绑定一个命名的 <map></map>，而 <map></map> 内部用多个 <area> 定义可点击区域。

`shape` 和 `coords` 怎么配对写？

shape 决定区域形状，coords 是对应坐标的像素值列表，顺序和含义强绑定。不匹配就会点不中、区域错位：

shape="rect" → coords="x1,y1,x2,y2"（左上角 + 右下角）
shape="circle" → coords="cx,cy,r"（圆心 x, y + 半径 r）
shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."（依次列出多边形顶点）

注意：所有坐标都是相对于图片左上角（0,0）的像素值；图片缩放（比如 CSS 设置了 width）会导致 coords 失效——必须用原图尺寸写，或改用 SVG 替代。

为什么点了没反应？常见硬伤检查点

最常卡在三处，挨个核对比重写更快：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

<img> 的 usemap 值要带 #，比如 usemap="#nav-map"，而对应 <map></map> 的 name 是 name="nav-map"（不能漏掉 #，也不能写成 id）
<map></map> 必须和 <img> 在同一 DOM 上下文里（不能被 display: none 包裹，也不能在 Shadow DOM 里直接用）
<area> 缺少 href 或 onclick 就只是“定义了区域”，但不会有任何交互反馈

示例最小可用结构：

@@##@@
<map name="plan-map"><area shape="rect" coords="10,20,110,120" href="/room-a" alt="Room A">
<area shape="circle" coords="200,80,30" href="/lobby" alt="Lobby"></map>

响应式场景下 `<map></map>` 还能用吗？

原生 <map></map> 不支持缩放自适应。只要图片用了 width: 100% 或 max-width，coords 就会失效。真要适配，只有两个务实选择：

放弃 <map></map>，改用 SVG：<svg></svg> 内嵌 <image></image> + <path></path> 或 <rect></rect>，天然响应式
保留 <map></map>，但用 JS 动态重算 coords（监听 resize，按比例缩放原坐标），代价是代码变重、移动端有延迟

别信“加个 transform: scale() 就能修好”的说法——<area> 的坐标系不随 transform 变化，只会让热区彻底漂移。