const map = document.querySelector(".svg-map"); /* ===================================================== THEMEN ZUORDNUNG ===================================================== */ const fachbereiche = { Bio: { class: "highlight-bio", themen: ["Analyse", "Lebensraum", "Aufbereitung", "Klima"] }, Che: { class: "highlight-chemie", themen: ["Eigenschaften", "Analyse", "Verschmutzung"] }, Phy: { class: "highlight-physik", themen: ["Eigenschaften", "Nutzung"] }, Mint: { class: "highlight-mint", themen: ["Aufbereitung", "Nutzung"] } }; /* ===================================================== HOVER FACHBEREICHE ===================================================== */ Object.entries(fachbereiche).forEach(([id, data]) => { const fach = document.getElementById(id); fach.addEventListener("mouseenter", () => { map.classList.add("dimmed"); map.classList.add(data.class); data.themen.forEach(themeId => { document .getElementById(themeId) .classList.add("active"); }); }); fach.addEventListener("mouseleave", () => { map.classList.remove("dimmed"); map.classList.remove(data.class); data.themen.forEach(themeId => { document .getElementById(themeId) .classList.remove("active"); }); }); }); /* ===================================================== THEMEN KLICKBAR ===================================================== */ const themenLinks = { Analyse: "#wasser-analyse", Lebensraum: "#wasser-lebensraum", Aufbereitung: "#wasser-aufbereitung", Klima: "#wasser-klima", Eigenschaften: "#wasser-eigenschaften", Nutzung: "#wasser-nutzung", Verschmutzung: "#wasser-verschmutzung" }; Object.entries(themenLinks).forEach(([id, link]) => { const el = document.getElementById(id); /* Hover Cursor */ el.style.cursor = "pointer"; /* Klick */ el.addEventListener("click", () => { window.location.href = link; }); /* Tastatur-Zugänglichkeit */ el.setAttribute("tabindex", "0"); el.addEventListener("keydown", (e) => { if (e.key === "Enter") { window.location.href = link; } }); });