WMP Webstandards

Automatisches ersetzen von PNGs

zurück zur Übersicht

Nach oben

Warum dieser Artikel

Da der Internet Explorer < 7 PNGs nicht richtig darstellen kann, soll dieses Script alle Bilder die PNG anzeigen sollen durch einen span ersetzen.

function replacePNGs() {
  imgs = document.getElementsByTagName('img');
  for(i = 0;i < imgs.length;i++) {
    img = imgs[i];
    if(img.getAttribute('src', false).match(/\.png$/i) && navigator.userAgent.match(/MSIE\s+(5.5|6.0)/i)) {
      newSpan = document.createElement("span");
      img.parentNode.insertBefore(newSpan, img);
      newSpan.style.width = img.offsetWidth + 'px';
      newSpan.style.height = img.offsetHeight + 'px';
      newSpan.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.getAttribute('src', false) + "', sizingMethod='crop', enabled=true)";
      img.style.display = 'none';
    }
  }
}

window.onload = replacePNGs; Nach oben

Aufbau des Scripts

  1. Aufruf durch window.onload
  2. Alle img Tags des Dokuments holen
  3. Jedes einzelne Bild durchgehen
  4. Überprüfen ob das Bild ein PNG ist und ob der Browser IE < 7 ist
  5. Neues Span Element erstellen mit document.createElement
  6. Dem neu erstellten Span die Breite und die Höhe des Bildes geben
  7. Dem Span das Bild als Hintergrund setzen (Das funktioniert nur, wenn auf dem Rechner auf dem die Seite angeschaut wird, DirectX installiert ist!)
  8. Das Span dann noch vor das Bild einfügen und
  9. Das eigentlich Bild ausblenden
  10. Fertig!
Hinweis! Dieser Workaround funktioniert nicht im IE < 5.5 Nach oben

Alternative

Eine gute Alternative dazu ist: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Kommentare







01.03.2007 Löschen

hehe

n1

28.03.2007 Löschen

Matthias

Danke für das Script, ist für mich sehr hilfreich!

Von curi. Letzte Änderung am 17.05.2007