Hey Community,
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.
Professionell geplante Bürobeleuchtung – positiv für Mitarbeiter und Unternehmen | elumico (webflow.io). 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:
- 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?
<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>
Would greatly appreciate any guidance, hints to my problem. Have a great weekend 
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
there are better ways to learn or find solutions.
) but if it does the job who cares. 
