### [area 标签做图片热区联动的三种方案](https://www.huociguo.com/article/1862)

**Published:** 2026-10-04T03:22:49

**Author:** 米了

**Excerpt:** 🗺️ 一张图里点不同区域，切换另一张图显示，这种联动常见。area 标签能参与，但局限明显，三种方案对比看。方…

🗺️ 一张图里点不同区域，切换另一张图显示，这种联动常见。area 标签能参与，但局限明显，三种方案对比看。

方案一，纯 area 加 JS。在 `map` 里给每个 `area` 绑 `click`，事件里改目标 `img` 的 `src` 或切 `hidden`。area 自身无法联动，必须靠脚本。⚠️ coords 按图片原始尺寸写，CSS 缩放后热区会错位，需动态换算或禁用缩放。

![多图陈列示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-4340918.jpeg)

多张图并列，联动切换更直观

方案二，SVG 覆盖层。用 `<svg>` 画热区，坐标随视口自适应，缩放不错位，事件绑定也更灵活。复杂联动首选。

方案三，分块独立图片。把图切成多张，各自绑事件，省去坐标换算，但失去整图的视觉连续。

综合：简单固定尺寸的小图用方案一；要自适应、热区多则用 SVG；追求零坐标维护选方案三。

**Tags:** area 标签, coords 坐标, map 图像映射, 图片热区, 热区联动

**Categories:** HTML5

---