如何实现点击图片显示描述框与放大图，以及在现有HTML代码中整合mouseover事件监听器或getRadioValue()方法

Hey there! Let's tackle your two requirements and integrate them smoothly into your existing HTML code. Here's a step-by-step breakdown:

First, we'll add a hidden container for the enlarged image and detailed description, then use JavaScript to toggle its visibility when the image is clicked.

Here's the modified HTML with necessary additions:

<div class="container">
  <div class="juno">
    <img id="juno-img" src="juno.jpg" width="450" height="150" alt="Roland Juno (a classic)">
    <p id="demo">ROLAND JUNO SYNTHESZIER</p>
    <!-- Hidden container for enlarged image and description -->
    <div id="image-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); padding: 2rem; text-align: center;">
      <img src="juno.jpg" style="max-width: 90%; max-height: 90%;" alt="Enlarged Roland Juno">
      <div style="color: white; margin-top: 1rem;">
        <h3>Roland Juno Synthesizer</h3>
        <p>An iconic analog synthesizer from the 80s, loved for its warm, lush sounds and portability.</p>
      </div>
    </div>
  </div>
</div>

Then add this JavaScript to handle the click event:

const junoImg = document.getElementById('juno-img');
const imageModal = document.getElementById('image-modal');

// Toggle modal visibility on image click
junoImg.addEventListener('click', () => {
  imageModal.style.display = imageModal.style.display === 'none' ? 'block' : 'none';
});

// Optional: Close modal when clicking outside the image
imageModal.addEventListener('click', (e) => {
  if (e.target === imageModal) {
    imageModal.style.display = 'none';
  }
});

Let's cover each part separately, then show how to combine them with your existing code.

1. Using the mouseover Event Listener #

The mouseover event triggers when the mouse enters an element. You can use it to add hover effects, like dimming the image or updating the description. Here's how to add it to your Juno image:

// Add hover opacity effect
junoImg.addEventListener('mouseover', () => {
  junoImg.style.opacity = '0.8';
});

// Revert effect when mouse leaves
junoImg.addEventListener('mouseout', () => {
  junoImg.style.opacity = '1';
});

2. Creating and Using getRadioValue() #

This function retrieves the selected value from a group of radio buttons. First, add some radio buttons to your HTML (for selecting different synth models), then write the function:

Add this inside your .container div:

<div class="synth-selector" style="margin: 1rem 0;">
  <label>
    <input type="radio" name="synth-model" value="juno-60"> Juno-60
  </label>
  <label>
    <input type="radio" name="synth-model" value="juno-106" checked> Juno-106
  </label>
</div>

Now define the getRadioValue() function:

function getRadioValue(radioName) {
  const radioButtons = document.querySelectorAll(`input[name="${radioName}"]`);
  for (const radio of radioButtons) {
    if (radio.checked) {
      return radio.value;
    }
  }
  return 'juno-106'; // Fallback to default if no selection
}

Integrating These Features #

Combine them to, for example, update the description when a radio button is selected, or show a custom message on mouseover based on the selected model. Here's a full integrated example:

<style>
  .juno {
    position: relative;
  }
  #juno-img {
    cursor: pointer;
    transition: opacity 0.3s ease;
  }
</style>
<div class="container">
  <div class="juno">
    <img id="juno-img" src="juno.jpg" width="450" height="150" alt="Roland Juno (a classic)">
    <p id="demo">ROLAND JUNO SYNTHESZIER</p>
    <div id="image-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); padding: 2rem; text-align: center;">
      <img src="juno.jpg" style="max-width: 90%; max-height: 90%;" alt="Enlarged Roland Juno">
      <div style="color: white; margin-top: 1rem;">
        <h3>Roland Juno Synthesizer</h3>
        <p>An iconic analog synthesizer from the 80s, loved for its warm, lush sounds and portability.</p>
      </div>
    </div>
  </div>
  <div class="synth-selector" style="margin: 1rem 0;">
    <label>
      <input type="radio" name="synth-model" value="juno-60"> Juno-60
    </label>
    <label>
      <input type="radio" name="synth-model" value="juno-106" checked> Juno-106
    </label>
  </div>
</div>

<script>
  const junoImg = document.getElementById('juno-img');
  const imageModal = document.getElementById('image-modal');
  const demoParagraph = document.getElementById('demo');

  // Handle image click for modal
  junoImg.addEventListener('click', () => {
    imageModal.style.display = imageModal.style.display === 'none' ? 'block' : 'none';
  });

  imageModal.addEventListener('click', (e) => {
    if (e.target === imageModal) {
      imageModal.style.display = 'none';
    }
  });

  // Mouseover/mouseout effects + dynamic description update
  junoImg.addEventListener('mouseover', () => {
    junoImg.style.opacity = '0.8';
    const selectedModel = getRadioValue('synth-model');
    demoParagraph.textContent = `VIEWING: ROLAND ${selectedModel.toUpperCase()}`;
  });

  junoImg.addEventListener('mouseout', () => {
    junoImg.style.opacity = '1';
    const selectedModel = getRadioValue('synth-model');
    demoParagraph.textContent = `ROLAND ${selectedModel.toUpperCase()} SYNTHESIZER`;
  });

  // getRadioValue function
  function getRadioValue(radioName) {
    const radioButtons = document.querySelectorAll(`input[name="${radioName}"]`);
    for (const radio of radioButtons) {
      if (radio.checked) {
        return radio.value;
      }
    }
    return 'juno-106';
  }

  // Update description when radio selection changes
  const synthRadios = document.querySelectorAll('input[name="synth-model"]');
  synthRadios.forEach(radio => {
    radio.addEventListener('change', () => {
      const selectedModel = getRadioValue('synth-model');
      demoParagraph.textContent = `ROLAND ${selectedModel.toUpperCase()} SYNTHESIZER`;
    });
  });
</script>

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