在点击图片时动态显示其替代文本（Alt Text）的JavaScript教程

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row my-row">
  <div class="col-md-3">
    <!-- 缩略图容器 START -->
    <div class="thumbnailContainer">
      <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="这是一张示例图片的替代文本" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="displayImageAndAlt(this);">
      <!-- 您可以添加更多缩略图 -->
      <img src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Image+2" alt="这是第二张图片的描述" class="img-thumbnail border-0 img-thumbnail-desktop mt-2" style="max-width:140px;" onclick="displayImageAndAlt(this);">
    </div>
    <!-- 缩略图容器 END -->
  </div>

  <div class="col-md-9">
    <!-- 主内容区 START -->
    <div class="container expandedImgSize d-flex flex-column justify-content-center align-items-center">
      <!-- 关闭按钮 -->
      <span class="close-btn" onclick="this.parentElement.style.display='none'">&times;</span>
      <!-- 放大后的图片 -->
      <img class="img-fluid" id="expandedImg" src="PLACEHOLDER IMG" alt="放大图片">
      <!-- 用于显示替代文本的区域 -->
      <div id="imgCaption" class="mt-2 text-center text-muted">
        <!-- 替代文本将显示在这里 -->
      </div>
    </div>
    <!-- 主内容区 END -->
  </div>
</div>

function displayImageAndAlt(thumbnail) {
  // 获取大图元素
  var expandedImg = document.getElementById("expandedImg");
  // 获取显示alt文本的容器元素
  var imgCaption = document.getElementById("imgCaption");
  // 获取主内容容器（用于显示/隐藏）
  var mainContentContainer = expandedImg.parentElement;

  // 1. 更新大图的src属性为点击的缩略图src
  expandedImg.src = thumbnail.src;

  // 2. 获取点击的缩略图的alt属性值
  var altText = thumbnail.alt;

  // 3. 将alt文本显示在指定的容器中
  imgCaption.innerHTML = altText;

  // 4. 显示主内容容器
  mainContentContainer.style.display = "flex"; // 使用flex以保持居中布局
}

/* 缩略图容器样式 */
.thumbnailContainer {
  overflow-y: auto; /* 如果缩略图很多，可以滚动 */
  height: 40vh; /* 示例高度 */
  padding: 10px;
  border-right: 1px solid #eee;
}

/* 缩略图通用样式 */
.img-thumbnail-desktop {
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: transform 0.2s ease-in-out; /* 添加平滑过渡效果 */
}

.img-thumbnail-desktop:hover {
  transform: scale(1.05); /* 鼠标悬停时略微放大 */
}

/* 放大后的图片容器样式 */
.expandedImgSize {
  display: none; /* 默认隐藏 */
  position: relative;
  max-width: 800px; /* 限制大图容器的最大宽度 */
  margin: auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border-radius: 8px;
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 25px;
  color: #aaa;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
}

.close-btn:hover,
.close-btn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* 替代文本样式 */
#imgCaption {
  font-size: 1.1em;
  color: #555;
  margin-top: 15px;
  max-width: 90%; /* 限制文本宽度 */
  word-wrap: break-word; /* 自动换行 */
}