onmouseover时将缩略图alt标签传递至预览图的技术求助

别发愁，这个需求其实用几行简单的JavaScript就能实现，我给你整理了一套完整的可直接复用的代码，一步步来：

第一步：搭建HTML结构 #

我们需要一个预览图容器和缩略图列表，每个缩略图绑定鼠标悬停事件，同时自带自己的图片地址和Alt文本：

<div class="image-preview-container">
  <!-- 预览图 -->
  <img id="main-preview" src="初始预览图地址.jpg" alt="初始预览文本" width="400">
  
  <!-- 缩略图列表 -->
  <div class="thumbnails">
    <img src="缩略图1.jpg" alt="风景图1：湖边日落" onmouseover="updatePreview(this)" width="100">
    <img src="缩略图2.jpg" alt="风景图2：山间云海" onmouseover="updatePreview(this)" width="100">
    <img src="缩略图3.jpg" alt="风景图3：海边礁石" onmouseover="updatePreview(this)" width="100">
  </div>
</div>

第二步：简单CSS美化（可选） #

给布局加一点样式，让预览图和缩略图排列更合理：

.image-preview-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thumbnails img {
  cursor: pointer;
  border: 2px solid transparent;
}

.thumbnails img:hover {
  border-color: #2196F3;
}

第三步：核心JavaScript函数 #

只需要这几行代码，就能实现悬停时同步更新预览图的图片和Alt标签：

function updatePreview(thumbnail) {
  // 获取预览图元素
  const mainPreview = document.getElementById('main-preview');
  
  // 将缩略图的src赋值给预览图
  mainPreview.src = thumbnail.src;
  // 将缩略图的alt赋值给预览图的alt
  mainPreview.alt = thumbnail.alt;
}

关键说明 #

• 我们通过onmouseover="updatePreview(this)"把当前悬停的缩略图元素直接传给函数，这样就能轻松拿到它的src和alt属性
• 函数里通过document.getElementById找到预览图，然后直接替换对应的属性就完成了更新
• 如果你需要初始预览图和第一张缩略图保持一致，只需要把预览图的初始src和alt改成和第一张缩略图一样就行

这个方案不需要复杂的JS知识，代码简洁易懂，你直接替换里面的图片地址就能用啦～

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