(function() { var wohnung = document.getElementsByClassName("wohnung-img"), kueche = document.getElementsByClassName("kueche-img"), bad = document.getElementsByClassName("bad-img"), index = 0; var setActive = function (element) { document.getElementById(element).classList.add("active"); }; var setDeactive = function (element) { document.getElementById(element).classList.remove("active"); }; for (index=0; index <= wohnung.length-1; index++) { if (wohnung[index].addEventListener) { wohnung[index].addEventListener("mouseenter", function(){setActive("wohnung")}, false); wohnung[index].addEventListener("mouseleave", function(){setDeactive("wohnung")}, false); } else { wohnung.attachEvent("onmouseenter", function(){setActive("wohnung")}); wohnung.attachEvent("onmouseleave", function(){setDeactive("wohnung")}); } } for (index=0; index <= kueche.length-1; index++) { if (kueche[index].addEventListener) { kueche[index].addEventListener("mouseenter", function(){setActive("kueche")}, false); kueche[index].addEventListener("mouseleave", function(){setDeactive("kueche")}, false); } else { kueche.attachEvent("onmouseenter", function(){setActive("kueche")}); kueche.attachEvent("onmouseleave", function(){setDeactive("kueche")}); } } for (index=0; index <= bad.length-1; index++) { if (bad[index].addEventListener) { bad[index].addEventListener("mouseenter", function(){setActive("bad")}, false); bad[index].addEventListener("mouseleave", function(){setDeactive("bad")}, false); } else { bad.attachEvent("onmouseenter", function(){setActive("bad")}); bad.attachEvent("onmouseleave", function(){setDeactive("bad")}); } } }());