Image Map not working as intended: Highlighted area get’s darken effect, but shouldn’t

I’ve been building a custom image map for our different light environments, where we display the different areas our light solutions can be used.

Under “Zielsetzungen” you can see the image map I’m talking about.

It is expected, that the user can hover over any of the 4 areas on the main image, and that the respective area get’s highlighted in orange, while the rest of the image is darkened.

Here is the image setup I’ve used:

1. main base image in white to greyscale that you see when not hovered
   2-5) for one area each, there is a png cutout with the building colored in our CI’s orange.

I’ve fixed the first stages of code already so that now the respective areas are highlighted, but are still darkened by the functions. I thought that using png’s with transparent bg, would only darken the main image underneath, but currently even the highlighted png’s are darkened aswell. Which I’m trying to solve but don’t know how.

I can only think about some issue with the Z-Index of the cutout png’s, but maybe someone could check my code to see if there is some minor error I’ve overlooked or it lies within the general approach of my images?

`<style>
  .main-image {
    transition: 0.3s;
    position: relative;
    background-image: url('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/64393083e51864f3cc4dfce0_industriebereiche_anwendung_startbild_transparent-bg-40pct-scale.png');
    background-size: cover;
  }
  .darkened {
    filter: brightness(50%);
  }
  #tooltip {
    z-index: 100;
  }
</style>

<div id="tooltip" style="display: none; position: absolute; pointer-events: none; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 10px; border-radius: 5px; font-size: 14px;">
  <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="main-image" id="main-image">

<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="setImageSource('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/6439a8c31ba631d09bbf87ff_industriebereiche_anwendung_lager-highlight-40pct-final.png'); darkenImage(); showTooltip('Lager- und Logistikbereiche');" onmouseout="resetImageSource(); undarkenImage(); 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="setImageSource('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/6439a8c3e244ea05c146db2e_industriebereiche_anwendung_produktion-highlight-40pct-final.png'); darkenImage(); showTooltip('Produktionsbereiche');" onmouseout="resetImageSource(); undarkenImage(); 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="setImageSource('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/6439a8c300f7746d13ef3eaa_industriebereiche_anwendung_nebenbereiche-highlight-40pct-final.png'); darkenImage(); showTooltip('Nebenbereiche');" onmouseout="resetImageSource(); undarkenImage(); 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="setImageSource('https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/6439a8c308c482bbb4be2660_industriebereiche_anwendung_spezielle-leuchten-highlight-40pct-final.png'); darkenImage(); showTooltip('Spezielle Leuchten');" onmouseout="resetImageSource(); undarkenImage(); hideTooltip();" onmousemove="updateTooltipPosition(event);">
</map>

<script>
  var mainImage = document.getElementById('main-image');

  function setImageSource(src) {
    mainImage.src = src;
  }

  function resetImageSource() {
    mainImage.src = 'https://uploads-ssl.webflow.com/634723edf4a76fbc19fabbf3/64393083e51864f3cc4dfce0_industriebereiche_anwendung_startbild_transparent-bg-40pct-scale.png';
  }

  function darkenImage() {
    mainImage.classList.add('darkened');
  }

  function undarkenImage() {
    mainImage.classList.remove('darkened');
  }

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

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

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