made script compatible with IE8

js/meissner-wohnen.js

@@ -1,18 +1,28 @@
 (function() {
 
 
-    var wohnung = document.getElementsByClassName("wohnung-img"),
-        kueche = document.getElementsByClassName("kueche-img"),
-        bad = document.getElementsByClassName("bad-img"),
+    var wohnung = document.querySelectorAll(".wohnung-img"),
+        kueche = document.querySelectorAll(".kueche-img"),
+        bad = document.querySelectorAll(".bad-img"),
         index = 0;
 
 
+    // add class 'active' to the element
     var setActive = function (element) {
-        document.getElementById(element).classList.add("active");
+        if(document.getElementById(element).classList) {
+            document.getElementById(element).classList.add("active");
+        } else {
+            document.getElementById(element).setAttribute("class", "active");
+        }
     };
 
+    // remove class 'active' from element
     var setDeactive = function (element) {
-        document.getElementById(element).classList.remove("active");
+        if(document.getElementById(element).classList) {
+            document.getElementById(element).classList.remove("active");
+        } else {
+            document.getElementById(element).removeAttribute("class");
+        }
     };
 
 
@@ -21,8 +31,8 @@
             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")});
+            wohnung[index].attachEvent("onmouseenter", function(){setActive("wohnung")});
+            wohnung[index].attachEvent("onmouseleave", function(){setDeactive("wohnung")});
         }
     }
     for (index=0; index <= kueche.length-1; index++) {
@@ -30,8 +40,8 @@
             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")});
+            kueche[index].attachEvent("onmouseenter",  function(){setActive("kueche")});
+            kueche[index].attachEvent("onmouseleave",  function(){setDeactive("kueche")});
         }
     }
     for (index=0; index <= bad.length-1; index++) {
@@ -39,8 +49,8 @@
             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")});
+            bad[index].attachEvent("onmouseenter", function(){setActive("bad")});
+            bad[index].attachEvent("onmouseleave", function(){setDeactive("bad")});
         }
     }