<map> 和 <area> 的本质作用是定义图像上可响应区域的「坐标描述器」——浏览器靠它识别“哪块像素属于哪个区域”，但默认不触发任何交互；需通过 JavaScript 绑定事件实现自定义逻辑。
什么是 <map> 和 <area> 的本质作用
它们不是按钮，也不触发 click 事件（除非你手动加），更不参与表单提交。它们只是定义图像上可响应区域的「坐标描述器」——浏览器靠它知道“哪块像素属于哪个区域”，但默认什么也不做。
想实现“隐形按钮”，关键不是让 <area> 自己点一下就跳转或提交，而是用 JavaScript 绑定交互逻辑。
-
<area>必须放在<map>内，且<img>的usemap属性必须匹配<map>的name（注意：不是id） - 坐标系以图像左上角为原点，
coords顺序取决于shape：矩形是x1,y1,x2,y2，圆形是x,y,radius，多边形是连续的x,y对 - 所有
<area>默认无样式、不可聚焦、不冒泡click到父级 —— 这就是“隐形”的来源，也是你需要主动干预的原因
如何让 <area> 响应点击并执行自定义逻辑
直接给 <area> 加 onclick 是最简方式，但要注意：IE 旧版本对 <area> 的事件支持不稳定，现代浏览器没问题。
推荐用 JS 绑定，更可控：
立即学习“前端免费学习笔记（深入）”；
<img src="plan.png" usemap="#floor-map" alt="楼层平面图">
<map name="floor-map">
<area shape="rect" coords="10,20,110,120" data-action="open-room-101">
<area shape="circle" coords="200,150,30" data-action="open-elevator">
</map>
<script>
document.querySelectorAll('area[data-action]').forEach(area => {
area.addEventListener('click', function(e) {
e.preventDefault(); // 阻止默认跳转（如果写了 href）
const action = this.dataset.action;
if (action === 'open-room-101') {
showRoomDetail(101);
} else if (action === 'open-elevator') {
openElevatorPanel();
}
});
});
</script>
- 别依赖
href做跳转——它会让页面刷新或导航，不符合“隐形按钮”语义；用data-属性携带意图更干净 - 务必调用
e.preventDefault()，否则带href="#"的<area>会滚动到页首 - 移动端需额外处理：iOS Safari 对
<area>的触摸支持较弱，建议加style="cursor: pointer"并确保区域足够大（至少 44×44px）
为什么不能用 CSS 把 <area> 当成普通按钮来样式化
因为 <area> 是替换元素（replaced element），没有盒模型，不响应 display、padding、background 等绝大多数 CSS 属性。你给它加 border 或 color 没效果。
- 唯一能影响视觉的 CSS 是
cursor（比如cursor: pointer）和outline（用于键盘聚焦时提示） - 想做悬停反馈？不行。想加阴影或过渡动画？也不行。这些都得靠在图像上叠加透明
<div>或用 SVG 替代 —— 但那就不是<map>方案了 - 如果设计要求高亮热区，只能改原图，或用 JS 动态切换图像
src，或在图像外层套<div>后用绝对定位盖一层伪元素（复杂且需同步坐标）
<map> 的兼容性与替代方案提醒
所有现代浏览器都支持 <map> 和 <area>，但有两个现实约束常被忽略：
- 响应式图像下，
coords不自动缩放 —— 如果<img>宽度设为100%，而原始图是 800×600，那coords="10,20,110,120"在小屏上就错位了。必须用 JS 按比例重算坐标，或改用 SVG - 无障碍支持弱：
<area>无法被键盘Tab聚焦（除非加tabindex="0"），且屏幕阅读器对aria-label支持不一致。真要兼顾可访问性，得额外加aria-label和键盘事件监听 - 如果热区逻辑复杂、数量多、还要动画或拖拽，别硬撑
<map>—— 直接用 SVG 或 Canvas 更合适，坐标管理和交互控制都更自然
真正难的从来不是写几行 <area>，而是坐标怎么随屏幕变、盲人用户怎么操作、点击区域边缘是否精准 —— 这些才是落地时卡住人的地方。
