如何实现鼠标悬停侧边图片时中心区域同步切换为对应图片

核心逻辑为监听侧边图片的鼠标悬停事件，将中心展示区域图片的资源地址替换为当前悬停图片的地址即可完成需求。

修改后可直接运行的代码 #

<div style="float: left; margin-left: 100px; margin-top: 80px;">
  <!-- a标签href改为javascript:void(0)避免点击跳转 -->
  <a href="javascript:void(0)">
    <img id="image" src="你的侧边图1地址" width="100" height="100" alt="" title="" 
         onmouseover="document.getElementById('map').src = this.src" />
  </a>
  <a href="javascript:void(0)">
    <img id="image2" src="你的侧边图2地址" width="100" height="100" alt="" title="" 
         onmouseover="document.getElementById('map').src = this.src" />
  </a>
  <p></p>
</div>
<div align="center">
  <!-- 这里的src填默认展示的中心图地址即可 -->
  <img id="map" src="默认中心图地址" alt="" width="900" height="631" align="center" />
</div>

优化方案（适合侧边图片数量多的场景） #

如果后续侧边图片数量较多，逐个加onmouseover属性效率低，可以用批量事件绑定的方式实现：

1. 给所有侧边图片加统一的类名sidebar-img
2. 页面加载完成后批量给所有侧边图片绑定悬停事件

对应代码如下：

<div style="float: left; margin-left: 100px; margin-top: 80px;">
  <a href="javascript:void(0)">
    <img class="sidebar-img" id="image" src="你的侧边图1地址" width="100" height="100" alt="" title="" />
  </a>
  <a href="javascript:void(0)">
    <img class="sidebar-img" id="image2" src="你的侧边图2地址" width="100" height="100" alt="" title="" />
  </a>
  <!-- 后续再加更多侧边图也不用额外加事件属性 -->
  <p></p>
</div>
<div align="center">
  <img id="map" src="默认中心图地址" alt="" width="900" height="631" align="center" />
</div>

<script>
// 页面加载完成后绑定事件
window.onload = function() {
  const sideImgs = document.querySelectorAll('.sidebar-img');
  const centerImg = document.getElementById('map');
  sideImgs.forEach(img => {
    img.addEventListener('mouseover', function() {
      centerImg.src = this.src;
    })
  })
}
</script>

关键逻辑说明 #

• 触发mouseover事件时，this指向当前触发事件的侧边图片元素，可直接通过this.src拿到它的资源地址
• 中心图片的src属性被赋值为侧边图地址后，浏览器会自动加载新资源完成替换

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