基于Image Map实现图片悬停切换产品详情的技术求助

嘿，很高兴帮你解决这个问题！既然你已经搞定了裤子区域的悬停效果，那我们只需要给剩下的T恤和红衬衫区域添加同样的交互逻辑就行，用原生JavaScript就能轻松实现，我给你一步步讲解：

步骤1：给卡片和区域添加标识 #

首先，我们给每个产品卡片加上唯一ID，同时给对应的area区域添加data-product属性，让我们能把地图区域和卡片对应起来：

<div class="container-fluid"> 
  <div class="row"> 
    <div class="col-sm-8"> 
      <!-- 红衬衫卡片 -->
      <div class="card-deck card-design"> 
        <div class="card cd-cl " id="card-red-shirt"> 
          <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恤卡片 -->
      <div class="card-deck card-design"> 
        <div class="card cd-cl " id="card-t-shirt"> 
          <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> 
      <!-- 裤子卡片 -->
      <div class="card-deck card-design"> 
        <div class="card cd-cl " id="card-trouser"> 
          <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"> 
        <!-- 红衬衫区域 -->
        <area target="" alt="Red Shirt" title="Red Shirt" href="#" class="red" data-product="red-shirt" 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恤区域 -->
        <area target="" alt="T-Shirt" title="T-Shirt" href="" data-product="t-shirt" 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"> 
        <!-- 裤子区域 -->
        <area target="" alt="Trouser" title="Trouser" href="" data-product="trouser" coords="486,661,462,668,444,651,447,632,454,615,460,593,471,575,476,615,479,639" shape="poly"> 
        <!-- 其他区域可以保留，不需要的话也可以去掉 -->
        <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>

<!-- 把JS放在页面底部，确保DOM加载完成 -->
<script>
// 1. 把卡片和产品key对应起来
const productCards = {
  "red-shirt": document.getElementById("card-red-shirt"),
  "t-shirt": document.getElementById("card-t-shirt"),
  "trouser": document.getElementById("card-trouser")
};

// 2. 初始化卡片显示：默认只显示裤子卡片
function initCardDisplay() {
  for (const key in productCards) {
    productCards[key].style.display = key === "trouser" ? "block" : "none";
  }
}

// 3. 切换卡片显示的函数
function switchToCard(productKey) {
  // 先隐藏所有卡片
  for (const key in productCards) {
    productCards[key].style.display = "none";
  }
  // 显示选中的卡片
  if (productCards[productKey]) {
    productCards[productKey].style.display = "block";
  }
}

// 4. 给所有地图区域绑定悬停事件
const mapAreas = document.querySelectorAll("map area[data-product]");
mapAreas.forEach(area => {
  area.addEventListener("mouseover", function() {
    const productKey = this.getAttribute("data-product");
    switchToCard(productKey);
  });
  
  // 可选：鼠标离开时可以恢复默认显示，或者保持当前卡片
  // area.addEventListener("mouseout", function() {
  //   initCardDisplay();
  // });
});

// 页面加载完成后初始化
window.addEventListener("load", initCardDisplay);
</script>

代码解释 #

• 标识绑定：通过data-product属性把地图区域和对应卡片关联起来，这样我们能知道用户悬停的是哪个产品。
• 初始化显示：页面加载时默认只显示裤子卡片，和你现有的效果保持一致。
• 悬停切换：给每个带data-product的区域绑定mouseover事件，触发时切换到对应产品的卡片。
• 可选优化：如果需要鼠标离开地图区域后恢复默认显示，可以取消注释mouseout事件的代码。

这样修改后，你悬停T恤或红衬衫的地图区域时，就能自动切换显示对应的产品详情卡片啦！如果后续要加新的产品，只需要添加新卡片、给地图区域加data-product属性，再更新productCards对象就行，非常容易维护。

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