火次果
火次果

暂无菜单项

首页/文章/技术文章/web前端/HTML5/
打开 MD 链接

area 标签做图片热区联动的三种方案

发布于 1天前
6

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

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

多图陈列示意
多张图并列,联动切换更直观

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

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

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

常见问题(FAQ)

area 能直接联动其他图吗
不能。area 只是热区定义,需 JS 监听 click 才能切换目标图片。
coords 错位怎么破
按原始尺寸写 coords,或监听缩放动态换算,否则 CSS 缩放后热区偏移。
和 SVG 比哪个好
SVG 坐标自适应不错位,热区多、要响应式时更稳。
可以不写 map 吗
不能。area 必须包在 map 内且 img 用 usemap 关联,否则热区不生效。
分块图片方案适合什么
不要求整图连续、想省坐标维护时合适,代价是失去整图视觉连续。
area 标签coords 坐标map 图像映射图片热区热区联动
支持作者
如果这篇内容对你有帮助,可以请作者喝杯咖啡
0 点赞
0 收藏
分享
0 讨论
反馈
0 / 600
细中粗
0 讨论
热门最新
总结
暂无总结
嗨,下午好!
所有的成功,都源自一个勇敢的开始
创作
社区
购物
会员
近期热门

暂无数据

火次果
火次果
首页
资迅中心
小店
AI导航
社区
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于FAQ协议
火次果 © 2026鲁ICP备2025164830号-1