OnMouseOver触发左侧图片对应右侧弹窗加载媒体的HTML网页实现咨询

以下两种方案都不需要复杂框架，上手成本极低：

方案1：纯HTML/CSS实现（无JS代码，首选） #

完全不需要写JS，仅靠CSS就能实现需求：

• 先做布局：用Flex两栏布局，左侧固定宽度放底图容器，右侧固定宽度放媒体展示容器
• 左侧的线条不要合并到整张底图里，单独导出为透明背景的独立元素（可以是PNG图，也可以直接用CSS画简单线条）
• 用position: absolute把所有线条元素定位到左侧底图的对应位置上
• 每个线条元素对应一个右侧的媒体内容盒子，默认给display: none隐藏
• 用CSS伪类:hover做关联：悬停对应线条时，把匹配的右侧媒体盒子改为display: block显示即可

方案2：图片热区+极简JS（适合不想拆分线条素材的场景） #

如果要保留左侧整张原图不拆分，只需要写几行极简JS就能实现：

• 左侧放整张带线条的原图，用HTML原生的<map>+<area>标签给每条线条圈出触发热区，热区坐标可以用免费的在线图片热区生成工具自动生成，不需要手动计算
• 每个<area>标签绑定onmouseover事件，只需要一行代码控制右侧对应媒体内容的显示/隐藏，代码可以直接复用模板，只需要改对应ID即可
• 媒体内容直接用HTML原生的<img>/<video>/<audio>标签插入即可，需要自动播放的话加一行play()触发即可，不需要额外插件

预期效果参考 #

内容的提问来源于stack exchange，提问作者Wim Casier