area标签必须嵌套在map内且为直接子元素才生效，单独使用被浏览器忽略；需usemap="#name"与严格匹配，coords基于原图像素，不随CSS缩放自适应，href和alt为必填项。

area 标签必须嵌套在 map 内部才能生效

单独写 不会触发任何点击行为，浏览器直接忽略。它依赖 的 name 属性与 的 usemap 属性配对绑定。

常见错误是把 放在

或页面任意位置，结果区域完全不可点。正确结构必须是：

@@##@@
<map name="floor-plan"><area shape="rect" coords="10,20,110,120" href="/room/a">
<area shape="circle" coords="200,80,30" href="/room/b"></map>

usemap 值要带 # 前缀，name 值不带——这是最容易写反的点。

coords 坐标系以图片左上角为原点，单位是像素

所有 coords 数值都相对于图片原始尺寸（不是 CSS 缩放后的显示尺寸）。如果用 CSS 把图片缩放到 50%，但没重算 coords，点击区域就会严重偏移。

解决办法只有两个：

• 用原图尺寸设计 coords，再通过 img { width: 100%; height: auto; } 等比例缩放（此时 area 区域会随图片等比缩放，现代浏览器基本支持）
• 或彻底放弃响应式，固定图片宽高，确保 coords 与实际渲染像素一致

shape 可选 rect（4 个值：左、上、右、下）、circle（圆心 x、y、半径）、poly（多边形，至少 6 个值，x1,y1,x2,y2…）。

area 不支持 CSS hover 或 JavaScript 事件监听（除非用 trick）

原生 无法直接绑定 onclick、onmouseover，也不能写 style="cursor: pointer"。浏览器只认 href 和 alt。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

如果需要交互反馈，可行方案是：

• 用 href="javascript:void(0)" 配合 onclick 属性（兼容性好，但语义弱）
• 用 JS 遍历 document.querySelectorAll('map area')，给每个加 addEventListener('click', ...)（注意：IE8- 不支持 area 的事件冒泡，需降级处理）
• 放弃 ，改用绝对定位的透明 或
  覆盖图片（更灵活，但需手动维护坐标同步）

  替代方案：SVG + 更可控

  当区域形状复杂、需响应式、或要支持动画/渐变/过渡时， 很快会力不从心。SVG 是更现代的选择：

  <svg viewbox="0 0 800 600"><image href="plan.png" width="800" height="600"></image><path d="M10 20 L110 20 L110 120 L10 120 Z" fill="none" stroke="transparent" onclick="goToRoom('a')"></path></svg>

  好处是：path 支持任意矢量路径、可直接加 CSS 类、能用 transform 缩放、事件监听无兼容问题。缺点是需要把位图和矢量逻辑耦合，且旧版 IE 对 SVG 支持有限。

  真正难的不是怎么写 area，而是判断当前需求是否还值得用它——坐标维护成本、响应式适配、交互扩展性，这些常被低估。

  

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