自定义Image Map异常：高亮区域被意外变暗问题排查

我正在搭建一个用于展示照明方案适用区域的自定义Image Map，预期效果是鼠标悬停主图的4个区域时，对应区域以品牌橙色高亮，其余区域变暗。目前实现了区域高亮，但高亮区域也被变暗效果影响——原本以为透明背景的PNG只会让下方主图变暗，现在高亮PNG也被滤镜变暗了，最初怀疑是z-index问题，实际是结构逻辑错误。

问题根源 #

当前代码的核心错误是把高亮图直接替换成主图的src，同时给这唯一的<img>标签加变暗滤镜，导致整个图像（包括高亮的橙色区域）都被滤镜处理，完全没有实现“底图变暗+上层高亮”的分层效果，和z-index无关。

解决方案 #

改用双层图像结构实现分层效果：

• 底层：灰白主底图，绑定Image Map热区，负责响应鼠标事件和添加变暗滤镜
• 上层：高亮PNG图，绝对定位覆盖在底层图上，默认隐藏，悬停时显示对应区域的高亮图，透明背景透出下方变暗的底图

修改后完整代码 #

<style>
  .image-container {
    position: relative;
    display: inline-block; /* 让容器适应图片大小 */
  }
  .base-image {
    transition: 0.3s;
    display: block;
  }
  .highlight-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* 默认隐藏 */
    pointer-events: none; /* 不干扰底层热区的鼠标事件 */
  }
  .darkened {
    filter: brightness(50%);
  }
  #tooltip {
    z-index: 100;
    position: absolute;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    display: none;
  }
</style>

<div class="image-container">
  <div id="tooltip">
    <p id="tooltip-text"></p>
  </div>
  <!-- 底层主图，绑定热区 -->
  <img src="https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/64393083e51864f3cc4dfce0_industriebereiche_anwendung_startbild_transparent-bg-40pct-scale.png" 
       usemap="#image-map" 
       class="base-image" 
       id="base-image">
  <!-- 上层高亮图，默认隐藏 -->
  <img src="" class="highlight-image" id="highlight-image">
</div>

<map name="image-map">
  <area target="_self" alt="Lager- und Logistikbereiche" title="Lager- und Logistikbereiche" href="#" 
        coords="854,529,1206,358,1203,288,1061,215,709,385,705,454" shape="poly"
        onmouseover="setHighlightSource('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/6439a8c31ba631d09bbf87ff_industriebereiche_anwendung_lager-highlight-40pct-final.png'); darkenBaseImage(); showTooltip('Lager- und Logistikbereiche');"
        onmouseout="hideHighlightImage(); undarkenBaseImage(); hideTooltip();"
        onmousemove="updateTooltipPosition(event);">
  <area target="_self" alt="Produktionsbereiche" title="Produktionsbereiche" href="#" 
        coords="883,284,979,238,982,157,744,35,624,97,619,178,846,301" shape="poly"
        onmouseover="setHighlightSource('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/6439a8c3e244ea05c146db2e_industriebereiche_anwendung_produktion-highlight-40pct-final.png'); darkenBaseImage(); showTooltip('Produktionsbereiche');"
        onmouseout="hideHighlightImage(); undarkenBaseImage(); hideTooltip();"
        onmousemove="updateTooltipPosition(event);">
  <area target="_self" alt="Nebenbereiche" title="Nebenbereiche" href="#" 
        coords="227,379,423,255,686,406,686,460,901,575,746,647" shape="poly"
        onmouseover="setHighlightSource('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/6439a8c300f7746d13ef3eaa_industriebereiche_anwendung_nebenbereiche-highlight-40pct-final.png'); darkenBaseImage(); showTooltip('Nebenbereiche');"
        onmouseout="hideHighlightImage(); undarkenBaseImage(); hideTooltip();"
        onmousemove="updateTooltipPosition(event);">
  <area target="_self" alt="Spezielle Leuchten" title="Spezielle Leuchten" href="#" 
        coords="209,370,39,283,538,29,610,95" shape="poly"
        onmouseover="setHighlightSource('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/6439a8c308c482bbb4be2660_industriebereiche_anwendung_spezielle-leuchten-highlight-40pct-final.png'); darkenBaseImage(); showTooltip('Spezielle Leuchten');"
        onmouseout="hideHighlightImage(); undarkenBaseImage(); hideTooltip();"
        onmousemove="updateTooltipPosition(event);">
</map>

<script>
  const baseImage = document.getElementById('base-image');
  const highlightImage = document.getElementById('highlight-image');
  const tooltip = document.getElementById('tooltip');
  const tooltipText = document.getElementById('tooltip-text');

  function setHighlightSource(src) {
    highlightImage.src = src;
    highlightImage.style.display = 'block';
  }

  function hideHighlightImage() {
    highlightImage.style.display = 'none';
    highlightImage.src = '';
  }

  function darkenBaseImage() {
    baseImage.classList.add('darkened');
  }

  function undarkenBaseImage() {
    baseImage.classList.remove('darkened');
  }

  function showTooltip(text) {
    tooltipText.innerText = text;
    tooltip.style.display = 'block';
  }

  function hideTooltip() {
    tooltip.style.display = 'none';
  }

  function updateTooltipPosition(event) {
    tooltip.style.left = event.pageX + 10 + 'px';
    tooltip.style.top = event.pageY + 10 + 'px';
  }
</script>

关键修改说明 #

1. 分层结构：用image-container包裹底层图和上层图，容器设为relative，上层图absolute定位铺满容器，确保两层完全对齐。
2. 职责分离：
   • 底层base-image：绑定Image Map热区，负责响应鼠标事件，添加/移除变暗滤镜
   • 上层highlight-image：仅负责显示高亮区域，默认隐藏，悬停时加载对应PNG并显示，设置pointer-events: none避免干扰底层热区的鼠标交互
3. JS逻辑调整：不再替换底层图的src，而是单独控制上层高亮图的显示/隐藏和资源加载，同时仅给底层图加变暗滤镜，这样高亮区域不受滤镜影响，透明部分透出下方变暗的底图，完全符合预期效果。

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