🗺️ 一张图里点不同区域,切换另一张图显示,这种联动常见。area 标签能参与,但局限明显,三种方案对比看。
方案一,纯 area 加 JS。在 map 里给每个 area 绑 click,事件里改目标 img 的 src 或切 hidden。area 自身无法联动,必须靠脚本。⚠️ coords 按图片原始尺寸写,CSS 缩放后热区会错位,需动态换算或禁用缩放。

方案二,SVG 覆盖层。用 <svg> 画热区,坐标随视口自适应,缩放不错位,事件绑定也更灵活。复杂联动首选。
方案三,分块独立图片。把图切成多张,各自绑事件,省去坐标换算,但失去整图的视觉连续。
综合:简单固定尺寸的小图用方案一;要自适应、热区多则用 SVG;追求零坐标维护选方案三。
