HTML中map热区怎么定义-html教程-PHP中文网

usemap与map的name必须逐字节匹配（含#、大小写、符号），coords基于原始图片尺寸且需按shape规范填写，area必须嵌套于map内并带href和alt属性。

html中map热区怎么定义

热区定义不难，但错一个字符就完全失效——usemap 和 map 的 name 必须逐字节一致，coords 必须按原始图片像素写死，浏览器不报错，只让你点不动。

这是 90% 热区失效的根源。不是“差不多就行”，而是大小写、连字符、#号缺一不可。

usemap 值必须以 # 开头，比如 usemap="#floor-plan"
<map name="floor-plan"></map> 的 name 值必须和 # 后面的字符串**完全相同**（不能是 floor_plan、Floor-Plan 或漏掉 #）
调试时直接在 Chrome DevTools 里右键图片 → “检查”，看是否能高亮到对应 <map></map>；如果不能，基本就是匹配失败

coords 不是“随便标几个点”，它依赖 shape 类型，且永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），跟 CSS 缩放无关。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角，要求 x1 且 <code>y1
shape="circle" → coords="cx,cy,r"：圆心坐标 + 半径，r 必须为正整数
shape="poly" → coords="x1,y1,x2,y2,x3,y3,...,x1,y1"：顶点成对出现，总数必须是偶数；首尾点**必须手动重复闭合**（否则不是封闭区域）
别用 shape="default" 做兜底——它会捕获所有未覆盖区域，干扰调试

<area> 是空元素，不渲染任何内容，也不支持 title 或 aria-label，但它绝不能脱离 <map></map> 存在。

<area> 必须作为 <map></map> 的**直接子节点**，不能包在 <div> 或 <code><section></section> 里
href 必须是有效 URL：./page.html#id 或 javascript:void(0) 都可以，但纯 #id 在多数浏览器中不跳转
alt 属性强制要求：缺失时 Chrome 控制台会 warn，屏幕阅读器跳过该区域，无障碍直接失效；哪怕只是 alt="" 也比没有强
移动端最小热区建议 ≥ 44×44px 物理像素，iOS Safari 对小面积 poly 响应迟钝

这不是 bug，是机制限制：coords 绑定的是原始像素，CSS 缩放（如 width: 100%）不会自动重算坐标。

临时方案：监听 img.load 和 window.resize，用 img.naturalWidth / img.offsetWidth 算缩放比，再遍历所有 area，把每个 coords 数值乘以比例后重新赋值
长期方案：改用 SVG 替代 —— <svg></svg> 内部的 <path></path> 或 <polygon></polygon> 天然响应式，支持完整 ARIA，且坐标可相对单位（如 %）定义
千万别指望浏览器自动适配；只要图片用了 max-width 或 height: auto，原始 coords 就已失效