利用JavaScript实现图片选择器与页面跳转功能

<div class="park-selection-container">
  <p class="selection-prompt">请选择您想前往的乐园：</p>
  <!-- 第一个乐园选项 -->
  <input type="image" src="/Archives/Universal Botao.png" 
         id="universal-option" 
         alt="环球影城" 
         class="park-button" 
         data-default-src="/Archives/Universal Botao.png"
         data-hover-src="/Archives/Disney Universal Rosa.png"
         data-selected-src="/Archives/Universal Botao Selected.png">

  <!-- 第二个乐园选项 -->
  <input type="image" src="/Archives/Disney Botao.png" 
         id="disney-option" 
         alt="迪士尼乐园" 
         class="park-button"
         data-default-src="/Archives/Disney Botao.png"
         data-hover-src="/Archives/Disney Botao Rosa.png"
         data-selected-src="/Archives/Disney Botao Selected.png">

  <!-- 确认按钮 -->
  <button id="next-button" class="action-button">下一步</button>
</div>

// 获取HTML元素
const nextButton = document.getElementById("next-button");
const universalImg = document.getElementById("universal-option");
const disneyImg = document.getElementById("disney-option");

// 定义一个变量来存储当前的选择
let currentChoiceUrl = "";

// 定义一个对象，存储每个选项对应的目标URL
const destinationUrls = {
    universal: "universal-result.html",
    disney: "disney-result.html",
};

// 定义一个函数来处理图片选择的视觉反馈
function handleImageSelection(selectedImage) {
    // 移除所有图片的选中状态
    [universalImg, disneyImg].forEach(img => {
        img.src = img.dataset.defaultSrc; // 恢复默认图片
        img.classList.remove('selected'); // 移除选中样式
    });

    // 设置当前图片的选中状态
    selectedImage.src = selectedImage.dataset.selectedSrc; // 切换到选中图片
    selectedImage.classList.add('selected'); // 添加选中样式
}

// 监听环球影城图片的点击事件
universalImg.addEventListener("click", () => {
    currentChoiceUrl = destinationUrls.universal;
    handleImageSelection(universalImg);
});

// 监听迪士尼乐园图片的点击事件
disneyImg.addEventListener("click", () => {
    currentChoiceUrl = destinationUrls.disney;
    handleImageSelection(disneyImg);
});

// 监听“下一步”按钮的点击事件，执行页面跳转
nextButton.addEventListener("click", () => {
    if (currentChoiceUrl) { // 确保有选择才跳转
        window.location.href = currentChoiceUrl;
    } else {
        alert("请先选择一个乐园！"); // 提示用户进行选择
    }
});

// 可选：实现悬停效果 (使用data属性)
[universalImg, disneyImg].forEach(img => {
    img.addEventListener('mouseover', () => {
        // 如果当前图片未被选中，则显示悬停图片
        if (!img.classList.contains('selected')) {
            img.src = img.dataset.hoverSrc;
        }
    });

    img.addEventListener('mouseout', () => {
        // 如果当前图片未被选中，则恢复默认图片
        if (!img.classList.contains('selected')) {
            img.src = img.dataset.defaultSrc;
        }
    });
});

.park-button {
  cursor: pointer; /* 提示用户图片可点击 */
  border: 2px solid transparent; /* 默认无边框 */
  transition: border-color 0.2s ease-in-out; /* 平滑过渡 */
}

.park-button.selected {
  border-color: #007bff; /* 选中时显示蓝色边框 */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* 添加阴影效果 */
}