求助：实现Image Map Area悬停切换产品详情卡片功能（附代码）

Hey there! Let's get this image map hover functionality working properly for all your products. Since you're new to coding, I'll break this down into simple, actionable steps with modified code you can copy directly.

First, Let's Understand the Problem #

Right now, all three product cards are visible at once, and your image map areas don't have any logic to switch which card is shown when hovering. We'll fix this by:

• Adding unique IDs to each card so we can target them with JavaScript
• Adding data attributes to each <area> to link them to their corresponding card
• Writing a tiny bit of JS to switch cards when hovering over an area
• Setting a default state where only one card is visible initially

Modified Full Code #

<div class="container-fluid"> 
  <div class="row"> 
    <div class="col-sm-8"> 
      <!-- Red Shirt Card - add unique ID -->
      <div class="card-deck card-design" id="shirt-card" style="display:none;"> 
        <div class="card cd-cl "> 
          <div class="card-body text-center"> 
            <p class="card-text cd-num">01</p> 
            <div class="b-r"> 
              <p class="card-text p-t ">TYPE</p> 
              <p class="card-text p-m ">SHIRT</p> 
              <img src="img/w-icon.png"> 
              <p class="card-text d-t">COTTON</p> 
              <p class="card-text d-m">100%</p> 
              <p class="card-text d-t">SIZE</p> 
              <p class="card-text d-m">M / L / XL</p> 
              <p class="card-text d-t">COLOR</p> 
              <p class="card-text d-m">RED</p> 
            </div> 
          </div> 
        </div> 
      </div> 

      <!-- T-Shirt Card - add unique ID -->
      <div class="card-deck card-design" id="tshirt-card" style="display:none;"> 
        <div class="card cd-cl "> 
          <div class="card-body text-center"> 
            <p class="card-text cd-num">02</p> 
            <div class="b-r"> 
              <p class="card-text p-t ">TYPE</p> 
              <p class="card-text p-m ">T-SHIRT</p> 
              <img src="img/w-icon.png"> 
              <p class="card-text d-t">COTTON</p> 
              <p class="card-text d-m">100%</p> 
              <p class="card-text d-t">SIZE</p> 
              <p class="card-text d-m">M / L / XL</p> 
              <p class="card-text d-t">COLOR</p> 
              <p class="card-text d-m">BLACK & WHITE</p> 
            </div> 
          </div> 
        </div> 
      </div> 

      <!-- Trouser Card - add unique ID, set as default visible -->
      <div class="card-deck card-design" id="trouser-card"> 
        <div class="card cd-cl "> 
          <div class="card-body text-center"> 
            <p class="card-text cd-num">03</p> 
            <div class="b-r"> 
              <p class="card-text p-t ">TYPE</p> 
              <p class="card-text p-m ">TROUSER</p> 
              <img src="img/w-icon.png"> 
              <p class="card-text d-t">COTTON</p> 
              <p class="card-text d-m">100%</p> 
              <p class="card-text d-t">SIZE</p> 
              <p class="card-text d-m">M / L / XL</p> 
              <p class="card-text d-t">COLOR</p> 
              <p class="card-text d-m">WHITE</p> 
            </div> 
          </div> 
        </div> 
      </div> 

      <img src="img/banner.jpg" usemap="#image-map"> 
      <map name="image-map"> 
        <!-- Red Shirt Area - add data-target to link to its card -->
        <area target="" alt="Red Shirt" title="Red Shirt" href="#" class="red" data-target="#shirt-card" coords="530,202,554,251,562,315,564,405,554,459,544,515,518,595,518,536,462,547,450,444,428,334,428,286,437,251,440,232,491,217,506,214" shape="poly"> 
        <!-- T-Shirt Area - add data-target -->
        <area target="" alt="T-Shirt" title="T-Shirt" href="" data-target="#tshirt-card" coords="734,617,715,564,695,514,676,490,661,456,642,397,630,347,625,300,622,254,623,190,676,208,735,220,767,312,773,358,783,461,783,536,752,534,728,532,732,573" shape="poly"> 
        <!-- Trouser Area - add data-target -->
        <area target="" alt="Trouser" title="Trouser" href="" data-target="#trouser-card" coords="486,661,462,668,444,651,447,632,454,615,460,593,471,575,476,615,479,639" shape="poly"> 
        <!-- I left the other areas as-is since you didn't mention them, but you can add data-target to those too if needed -->
        <area target="" alt="" title="" href="" coords="547,890,588,881,606,875,618,844,623,814,632,769,642,751,656,769,662,793,676,824,684,854,701,861,739,868,801,856,803,832,795,797,784,763,776,734,771,710,774,680,756,664,734,622,701,634,676,637,645,627,633,619,615,624,591,627,557,620,525,607,518,636,508,663,496,681,494,703,503,747,503,798,510,836,508,868" shape="poly"> 
        <area target="" alt="" title="" href="" coords="552,247,567,268,578,285,596,281,618,263,623,295,625,325,630,358,639,385,640,408,654,442,662,471,676,495,689,510,703,536,715,573,730,610,725,625,708,631,686,631,661,629,633,619,608,622,583,620,554,614,522,602,533,554,547,508,557,453,566,405,567,378,562,336,564,300,554,258" shape="poly"> 
      </map> 
    </div> 
    <div class="col-sm-4"> 
      <h3>Column 2</h3> 
      <p>Lorem ipsum dolor..</p> 
    </div> 
  </div> 
</div>

<!-- Add this script at the bottom of your HTML (right before </body>) -->
<script>
// Get all the image map areas with data-target attributes
const areas = document.querySelectorAll('map area[data-target]');

// Add hover event listener to each area
areas.forEach(area => {
  area.addEventListener('mouseover', function() {
    // Hide all product cards first
    document.querySelectorAll('.card-deck.card-design').forEach(card => {
      card.style.display = 'none';
    });
    // Show the target card linked to this hovered area
    const targetCard = document.querySelector(this.dataset.target);
    if (targetCard) {
      targetCard.style.display = 'block';
    }
  });

  // Optional: Uncomment this if you want to revert to the default trouser card when mouse leaves the area
  // area.addEventListener('mouseout', function() {
  //   document.querySelectorAll('.card-deck.card-design').forEach(card => {
  //     card.style.display = 'none';
  //   });
  //   document.getElementById('trouser-card').style.display = 'block';
  // });
});
</script>

Key Changes Explained #

1. Card IDs: Each product card now has a unique ID (shirt-card, tshirt-card, trouser-card) so we can easily show/hide them. We set the trouser card as visible by default, and hid the others with style="display:none".
2. Data Attributes: Each relevant <area> has a data-target attribute pointing to the ID of its corresponding card. This tells our JavaScript which card to display when hovering that area.
3. JavaScript: We added a simple script that:
   • Finds all areas with a data-target attribute
   • Listens for when the mouse hovers over each area
   • Hides all cards, then shows the one linked to the hovered area
   • There's an optional mouseout handler you can uncomment if you want to revert to the default trouser card when the mouse leaves the area.

Testing It Out #

Just copy this modified code into your project, and make sure the image paths (img/banner.jpg, img/w-icon.png) are correct. Now when you hover over the red shirt, T-shirt, or trouser areas on the image, the corresponding detail card should show up!

If you run into any issues, feel free to ask—we can tweak it further 😊

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