Freitag, 18. Mai 2012
Transparente PNGs im Internetexplorer richtig anzeigen
Jeder kennt das Problem, man erstellt ein transparentes PNG, baut es in die Seite ein und Firefox und co. stellen sie auch transparent dar. Nochmal die Seite im Internet Explorer aufrufen, ja und dann kommt auch schon der Schock. Der Internet Explorer hat ein Problem mit transparenten PNGs. Anstatt Transparenz zeigt er einen grauen Hintergrund an.

Wie du dies verhindern kannst, möchte ich dir gerne erklären.

1. Erstelle eine Datei Namens pngbehavior.htc, in die du folgendes schreibst:

CODE:
<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>
/*
* PNG Behavior
*
* This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
* for WebFX (http://webfx.eae.net)
* Copyright 2002-2004
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.02
* Created: 2001-??-?? First working version
* Updated: 2002-03-28 Fixed issue when starting with a non png image and
* switching between non png images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
* 2004-05-09 When printing revert to original
*
*/

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";

var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}

function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}

function afterPrint() {
isPrinting = false;
fixImage();
}
</script>
</public:component>

Die Datei kannst du dir auch hier herunterladen.

2. Wie im Code zu sehen ist benötigst du eine blank.gif, in dem Verzeichnis, wo auch später die pngbehavior.htc hochgeladen wird. Die Datei kannst du dir einfach selber erstellen, indem du eine GIF-Grafik mit 1x1 Pixeln erstellst, den Hintergrund transparent lässt, oder du lädst dir die Datei hier herunter.

3. Lade die pngbehavior.htc und blank.gif in das selbe Verzeichnis auf deinen Webserver hoch.

4. Füge in die Datei, die die transparenten PNGs ausgibt folgenden CSS-Code ein:

CODE:
img {
behavior: url("pngbehavior.htc");
}

Passe gegebenenfalls noch den Pfad im CSS-Code an.

5. Das wars - nun stellt der Internet Explorer transparente PNGs richtig dar.


Generierungszeit: 0.2116 sec