HTML楼层导航区域映射制作教程-html教程-PHP中文网

必须用原始图尺寸精确读取像素坐标，usemap与map name须逐字节严格匹配（含#、大小写、连字符），响应式下需js动态重算coords或改用svg替代。

html楼层导航区域映射制作教程

直接用 <map></map> + @#@#@#@#@#@#@#@#@#@0 可拖拽生成，但务必核对导出的 <code>coords 是否与原始图分辨率一致

`usemap="#floor-map"` 和 `<map name="floor-map"></map>` 怎么配才不白写

这是最常静默失败的环节：浏览器对名称匹配极其严格，错一个字符就整个映射失效，控制台也不会报错。

<img usemap="#floor-map"> 中的 #floor-map 必须和 <map name="floor-map"></map> 的 name 值**逐字节一致**（注意：name 里没有 #）

name 值禁用空格、中文、下划线、大小写混用；推荐只用小写字母+短横线，如 floor-plan-2f

同一页面有多个楼层图（比如总览图 + 电梯井放大图），每个 usemap 和 name 都得唯一，不能复用同一组名称

检查 <area href="#2f">：如果只是锚点跳转，href 必须是有效 URL（如 ./plan.html#2f），#2f 这种纯 fragment 在某些浏览器中会触发“Failed to load resource”警告

响应式下热区错位怎么办

原生 <map></map> 的 coords 是固定像素值，图片缩放后热区不会跟着变——用户缩放页面或换手机访问，点的位置就全偏了。

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

下载

简单项目且图片宽度固定（如 max-width: 800px），可用 CSS image-rendering: -webkit-optimize-contrast 抑制模糊，但热区仍需 JS 重算

推荐加轻量 JS 库 rwd-image-maps，初始化只需一行：$('img[usemap]').rwdImageMaps();，它会监听 resize 并按缩放比重投 coords

复杂交互（如悬停高亮、楼层联动、带状态标记）直接改用 SVG：每个楼层用 <g id="2f"><rect></rect></g> 封装，坐标用百分比或 viewBox 自适应，语义和可访问性也更强

不要试图用 transform: scale() 或 zoom 强行缩放图片——<map></map> 完全不感知这些 CSS 变换

真正卡住人的从来不是写几行 <area>，而是坐标从哪来、名字配没配对、缩放后还准不准——这三步漏掉任意一个调试细节，热区就变成“看起来有，点不动”的幽灵区域。