Bilderfläche im Dokument berechnen

Das Script berechnet die Gesamtfläche aller Grafiken im Dokument. Berücksichtigt werden hierbei

• img-Elemente
• Hintergrundbilder
• Grafische Schaltflächen

Zurückgeliefert wird die Gesamtfläche in Quadratpixel.

/* ****************************************************************************************** *
 * Das Script kann frei verwendet werden, dieser Kommentar sowie die Nennung des Nicks
 * und der URL müssen jedoch erhalten bleiben.
 *
 *                                                           (c) Quaese (www.quaese.de), 2009
 * ****************************************************************************************** */

function calcGraphicsArea(){
  // Fläche
  var intArea = 0;
  // Alle Elemente ermitteln
  var arrElems = (navigator.userAgent.toLowerCase().indexOf("msie") != -1) ? document.all : document.getElementsByTagName('*');

  // Alle Elemente durchlaufen
  for(var i=0; i<arrElems.length; i++){
    // Falls es sich um ein IMG-Element handelt -> Dimensionen multiplizieren
    if(arrElems[i].nodeName.toLowerCase() == "img"){
      intArea += (parseInt(arrElems[i].width) * parseInt(arrElems[i].height));
    }else{
      // Hintergrundbild-Eigenschaft auslesen
      var strBG = readStyles(arrElems[i], 'background-image', 'backgroundImage');

      // Falls das Element ein Hintergrundbild besitzt
      if(strBG != 'none'){
        // URL extrahieren
        var arrErg = strBG.search(/url\(([^\)]+)/);
        var strURL = RegExp.$1;
        // Falls die URL in Anführungszeichen angegeben ist
        if(strURL.charAt(0) == "\"")
          strURL = strURL.substr(1, strURL.length-2);

        // Hilfelement
        var objImg = new Image();
        objImg.src = strURL;

        // Wiederholeigenschaft ermitteln
        var strRepeat = readStyles(arrElems[i], 'background-repeat', 'backgroundRepeat');

        // Falls das Hintergrundbild wiederholt wird
        if(strRepeat == 'repeat'){
          intArea += arrElems[i].offsetWidth * arrElems[i].offsetHeight;
        }else if(strRepeat == 'repeat-y'){
          intArea += parseInt(objImg.width) * arrElems[i].offsetHeight;
        }else if(strRepeat == 'repeat-x'){
          intArea += arrElems[i].offsetWidth * parseInt(objImg.height);
        }else if(strRepeat == 'no-repeat'){
          intArea += parseInt(objImg.width) * parseInt(objImg.height);
        }

      // Falls es sich um einen grafischen Button handelt
      }else if((arrElems[i].nodeName.toLowerCase() == "input") && (arrElems[i].type="image")){
        // Hilfelement
        var objImg = new Image();
        objImg.src = arrElems[i].src;

        intArea += parseInt(objImg.width) * parseInt(objImg.height);
      } // ENDE - if(strBG != 'none')
    } // ENDE - if(arrElems[i].nodeName.toLowerCase() == "img")
  } // ENDE - for(var i=0; i<arrElems.length; i++)

  return intArea;
}

function readStyles(objElem, strCSS, strCSS_JS){
  var strReturn;

  //  Falls der Brower die Methode "getComputedStyle" kennt (W3C-DOM)
  if(window.getComputedStyle){
    strReturn = window.getComputedStyle(objElem, null).getPropertyValue(strCSS);

  //  Falls der Browser die Methode "currentStyle" kennt (neuere IEs)
  }else if(objElem.currentStyle){
    strReturn = objElem.currentStyle[strCSS_JS];
  }

  return strReturn;
}