纯HTML地图区域映射需严守配对规则与原始尺寸坐标，usemap与name必须大小写一致，coords为像素值；area不支持事件监听，响应式需固定宽高或改用SVG；无障碍须加tabindex="0"和语义化alt。

纯 HTML 就能实现地图区域映射，不需要 JS 也能跳转，但「能用」不等于「好用」——坐标写错、响应式失效、键盘不可达，这三个问题占了 90% 的线上故障。

怎么写 和 才不白忙活

核心就两点：配对必须严丝合缝，坐标必须按原始图尺寸填。

• 的 usemap 属性值必须是 #xxx，且 的 name 必须完全一致（大小写敏感）
• 的 shape 只支持 rect、circle、poly 三种；coords 是像素值，不是百分比，比如 rect 要写成 "10,20,100,80"（左、上、右、下），不是 "10%,20%,100%,80%"
• 别漏掉 href 或 alt：href 缺失区域就点不动；alt 缺失会直接被屏幕阅读器跳过，也违反 WCAG

示例片段：

@@##@@
<map name="province-map"><area shape="poly" coords="120,85,130,70,145,75,140,90" href="/beijing" alt="北京市">
<area shape="rect" coords="200,110,260,150" href="/shanghai" alt="上海市"></map>

为什么鼠标悬停没反应？onmouseover 不生效的真相

原生 标签**不触发** onmouseover、onclick 等事件监听——这是浏览器规范限制，不是你代码写错了。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 想加 hover 效果，得用 CSS + 配合 的 usemap，再靠 JS 模拟：监听 img 的 mousemove，用 document.elementFromPoint(x, y) 判断是否落在某个 上（注意：该方法在缩放/滚动后需手动校正坐标）
• 更稳妥的做法是放弃 ，改用 SVG：每个 或 都能直接绑定事件、加 class、做 transition，且天然响应式
• 如果坚持用 image map，hover 提示只能靠 title 属性（但不支持样式、不兼容键盘焦点）

响应式下坐标全乱了，怎么办

的 coords 是绝对像素值，图片一缩放，坐标就偏移——没有自动适配机制。

• 最简方案：给 设固定宽高（如 width="800" style="max-width:90%"），禁用 CSS 缩放（避免 max-width: 100% 或 width: 100%）
• 动态适配方案：用 JS 监听 resize，按缩放比例重算所有 coords 值（需提前存原始尺寸和原始坐标）
• 推荐替代：直接用 SVG 地图，viewBox 天然支持等比缩放，坐标系与视口解耦，连 JS 都省了

键盘用户根本点不到区域？无障碍是硬门槛

默认状态下， **无法被 Tab 键聚焦**，屏幕阅读器也读不出结构——这不是 bug，是规范里就没设计交互焦点。

• 必须手动加 tabindex="0" 到每个 ，否则键盘用户完全无法操作
• alt 文本不能是空字符串或 “点击此处”，要描述区域含义，例如 alt="广东省，含广州、深圳等城市"
• 终极兜底：在页面某处提供一份纯文本链接列表，内容与地图区域一一对应，且放在 DOM 顺序靠前位置

真正难的不是画出区域，而是让同一套坐标在不同设备、不同输入方式、不同辅助技术下都可靠工作。坐标写对只是起点，可访问性、响应式、交互反馈才是落地时绕不开的坎。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！