Willkommen zu

Internet Explorer vs. PNG (AlphaImageLoader): Ein bißchen behavior und es funktioniert :)

Leider ist das ganze nicht Standard konform. Man könnte auch den Output abhängig vom Client durch ein PHP-File parsen und die benötigten style Tags einfügen. Hier gibts eine tolle Anleitung für PNG-Transparenz Serverseitig.

Das behavior file pngbehavior.htc:
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />


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

if (supported) fixImage();

function propertyChanged() {
if (!supported) 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) {
element.src = blankSrc;
return;
}

if (!new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if (/\.png$/.test(realSrc.toLowerCase())) {
// 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 = "";
}
}


</public:component>

Und dann alle imgs mit dem behavior file versehen:
img { behavior: url("/path2/pngbehavior.htc"); }

oder nur bestimmte images taggen
.trans { behavior: url("/path2/pngbehavior.htc"); }

Um kleine PNGs zu erzeugen empfehle und Alle anderen auch pngquant.

Danke an Eric A. Meyer, der CSS Guru, für diese Hilfen.