HTML区域映射为什么不显示？常见语法排错清单-html教程-PHP中文网

area标签不显示是正常行为，它必须嵌套在map内且被img通过usemap引用；coords须按shape严格匹配整数坐标格式；含href时alt为必填项；坐标基于图片原始尺寸，不随CSS缩放自适应。

html区域映射为什么不显示？常见语法排错清单

area 标签本身就不显示，它从来不是用来“渲染”的——不显示是正常行为，显示了反而说明你误用了它。

area 必须嵌套在 map 里，且 map 必须被 img 正确引用

常见错误现象：开发者工具里能看到元素，但鼠标悬停没手型、点击无反应；getBoundingClientRect() 返回 { width: 0, height: 0 }。

离开就彻底失效，写在或 里会被浏览器忽略（即使 DOM 树里能查到）
的 usemap 属性必须带 # 前缀，且与的 name 值逐字节匹配：大小写、连字符、空格都不能错


错误示例：usemap="worldmap"（缺 #）、usemap="#WorldMap"（大小写不一致）、 配 usemap="#worldmap"（连字符不一致）

 应紧邻 ，避免被 、 或 Shadow DOM 隔离
coords 坐标格式错一个字符就失效
常见错误现象：热区偏移、点不准、多边形完全不响应；用截图工具量取的坐标在页面上无效。


coords 值必须是整数像素，逗号分隔，**不能有空格**：正确是 "100,200,150,180,180,220"，错误是 "100, 200, 150, 180"（空格导致截断）

shape="poly" 至少需要 3 对坐标（6 个数字），少于则被忽略；顶点按顺序列出，自动闭合，无需重复首尾点

shape="rect" 要求 x1  且 y1 ，反序会导致区域不可见

坐标系原点在图片左上角（0,0），X 向右、Y 向下——导出坐标时若来自 Sketch/Figma/SVG 工具，注意是否默认 Y 向上

alt 和 href 缺一不可，否则语义与功能双崩
常见错误现象：屏幕阅读器跳过该区域；旧版 Safari 完全不识别；点击无跳转，控制台也无报错。

											
												
												
													htmlppt.skill
													把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
												
												下载
												
											
										


alt 不是“可选提示”，而是 WCAG 强制要求：必须描述区域用途，例如 alt="广东省，点击查看政策细则"，禁用 alt="" 或 alt="点击这里"


href 缺失时， 失去链接行为（哪怕绑了 JS click 事件，部分浏览器也不触发冒泡）
如果要执行 JS，仍需写 href="javascript:void(0)" 或 href="#"，并配 onclick，否则某些 iOS 版本会静默忽略

title 可加，但非必需；不能替代 alt，且部分浏览器对 title 渲染不可靠

响应式图片下 coords 必须手动重算，没有例外
常见错误现象：桌面端调好，移动端热区“飘”走；max-width: 100% 一加，整个映射就失效。


coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），和 CSS 渲染宽高无关
缩放比计算公式：scaleX = img.offsetWidth / img.naturalWidth，scaleY = img.offsetHeight / img.naturalHeight

不同 shape 处理方式不同：rect 四值都缩；circle 圆心坐标按各自方向缩，半径用 Math.min(scaleX, scaleY)；poly 所有偶数位（x）乘 scaleX，奇数位（y）乘 scaleY

必须监听 img.onload 和 window.resize，仅靠 CSS 或 object-fit 无法修正

真正容易被忽略的点是：area 的坐标绑定的是自然尺寸，不是渲染尺寸；而绝大多数人调试时只看渲染后的像素，却忘了读 naturalWidth。一旦图片被拉伸、裁剪或用 vw 设置宽度，硬写死的 coords 就等于废代码。