PNG Bilder in älteren IE Versionen richtig darstellen lassen

von Benutzer gelöscht | 1 | 6786 Aufrufe

Anzeige Hier werben

Motivation

Der Internet Explorer < 7 kann die Transparenz von PNGs nicht richtig darstellen.
Allerdings kann man durch einen etwas längeren Filter in CSS ändern, um die Darstellung zu verbessern.

Wie kann ich das ändern?

Durch den AlphaImageLoader Filter der von DirectX zur Verfügung gestellt wird, kann erreicht werden, das PNG Bild mit einer Transparenz von 0 - 100 % anzuzeigen.
Dabei wird das Bild als Hintergrundbild eines beliebigen Elements gesetzt.
Jedoch hat auch diese Methode einen Nachteil. Das Bild kann nicht frei positioniert werden wie ein normales, in CSS eingebundenes Hintergrundbild.
Hier nun ein kleines Code Beispiel in CSS:

 
css
1
2
3
div#png {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='das_bild.png', sizingMethod='crop', enabled=true)
}
Kurze Erklärung zu dem Filter
  1. Parameter: Gibt die URL des Bildes an
  2. Parameter: Gibt die Methode an, in der das Bild angezeigt werden soll
  3. Parameter: Gibt an, ob der Filter aktiv sein soll
Erweiterte Erklärung zu "sizingMethod"
crop image scale
Zeigt das Bild in den original Dimensionen an Standardwert!
Vergrößert das Element soweit, bis das Bild in den original Dimensionen anzeigt wird
Zeigt das Bild genau so groß an, wie das Element

Der Code

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
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;

Erklärung des Quelltextes

  • 1. Zeile: Funktion deklarieren
  • 2. Zeile: Alle img Tags, also alle Bilder in dem Dokument suchen
  • 3. Zeile: for Schleife für das Betrachten jedes einzelnen Bildes
  • 4. Zeile: Einfachere Schreibweise erreichen, sonst muss jedes mal imgs[i] geschrieben werden
  • 5. Zeile: Prüfen ob das angegebene Bild auch ein PNG ist + Der Benutzer mit dem IE 5.5 oder 6 unterwegs ist
  • 6. Zeile: span Element erstellen
  • 7. Zeile: Das eben erstellte span Element direkt vor dem Bild einfügen
  • 8. Zeile: Dem Span die Breite des Bildes geben
  • 9. Zeile: und die Höhe
  • 10. Zeile: Dem span Element den Filter für die DirectX Verarbeitung geben. Dem Filter muss die URL des Bildes übergeben, sowie die sizingMethod (hier mehr)
  • 11. Zeile: Das eigentliche Bild verstecken
  • 16. Zeile: Funktion direkt beim Dokumentaufruf starten
Über den Autor: Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten