PNG-Bilder Alpha-Kanal im IE

Als ich heute einige Icons von ausprobiert habe ist mir bei der standardmäßigen Kontrolle im IE aufgefallen das die sonst transparenten Hintergründer der PNGs grau dargestellt wurden.
Der Grund dafür ist das der IE keine PNGs mit Alpha-Kanal unterstützt.
PNGs sind aber wirklich praktisch, sie sind klein, 16Bit Farbtiefe sind möglich und eben Transparenz per Alpha-Kanal (wodurch man schöne Schatteneffekte erzielen kann).
Das lustige ist, das sobald du die Bilder per CSS positionierst, klappt das. Da ich es aber für sinnfrei halte die Bilder per CSS zu positionieren (zumindest in meinem aktuellen Projekt) habe ich nach ner alternativen Möglichkeit gesucht und auch gefunden!
Der IE kann es eigentlich, aber man muss ihn ein bischen unter die Arme greifen.
AlphaImageLoader heisst das Zauberwort.
Man könnte jetzt sich daraus z.B.:

progidXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />
das Problem hierbei ist, das das die anderen Browser nicht verstehen und somit das blank.gif zeigen.
Jetzt könnte man natürlich ne Funktion über JavaScript schreiben die den Browser erkennt.
Da ich aber auch nicht für jedes Bild ne If Anweisung möchte, habe ich weiter nach einer Lösung gesucht und zum Glück auch gefunden:

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 = "progidXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}

speichern als pngbehavior.htc und per JavaScript (im Head-Bereich) laden.

img {
behavior: url("pngbehavior.htc");
}
Die Funktion überprüft den Browser und lädt den Alphakanal-Loader nur wenn es der MS IE ab Version 5.5 ist.
gruß
Smoochy

Oder einfach den IE 7, Opera oder Firefox fordern...

Meiner Überzeugung nach muss eine Internetseite egal auf welchem Browser nahezu gleich aussehen!
Und da nach meinen Stats die IE < 7 Nutzer noch ca. 40 % ausmachen, halte ich es für angebracht lieber eine solche Lösung zu nutzen
gruß

Und wo steht bei dir, das ab IE7 der Hack nicht mehr genutzt wird?

Hmmm, hast ja Recht!
Aus:
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
Wird:
var supported = /MSIE (5\.5)|[6]/.test(navigator.userAgent) && navigator.platform == "Win32";

und warum würde

progidXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />
nicht für alle Browser funktionieren?

funktioniert, aber du legst das Bild doppelt übereinander und würdest damit halbtransparente Hintergründe (transparency 50%) imo doppeln und somit z.B. Schatteneffekte zerstören!

ich würde bei der idendifizierung des ie nicht über den browserstring gehen, sondern einfach über js fähigkeiten. ist sicherer.
zb www.lipfert-malik.de/webdesign/tutorial/bsp/browser_js_test.html

warum so kompliziert?
Dafür gibt es seit 3 Jahren eine Lösung

// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
function correctPNG()
{
for(var i=0; i
{
var img = document.images
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progidXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);

function correctPNG()
{
for(var i=0; i
{
var img = document.images
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
img.style.filter ="progidXImageTransform.Microsoft.AlphaImageLoader(src=img.src,sizingMethod='scale')";
}
}
}
wie wärs damit? is mal schnell kopiert/umgeändert.. aber das sollt reichen ^^

Nuky,
dann sind wir wieder beim Problem von oben das der Mozilla das Pic nicht mehr anzeigt! Also ganz so einfach ist es dann doch ned Und nein ich möchte keine Browsererkennung über JS und nen if-else case für jedes Pic!
Der Png behavior hack läuft stable und ist für mein Projekt am einfachsten zu implentieren. Ggf. kann TBT´s Code dasselbe aber den habe ich noch nicht getestet (und warum auch wenn meins bestens läuft )

Das lässt sich doch über die Conditional Comments prima lösen, wofür so ein riesiger Umstand?

ein
if(is_ie) macht bei mir die ganze arbeit - finde den negativ-rummel um browser detection ziemlich lächerlich
aber wenns für dich funktioniert - wunderbar.

Original von Smoochy
Meiner Überzeugung nach muss eine Internetseite egal auf welchem Browser nahezu gleich aussehen!

auch mit lynx?

Original von Holzhaus

Original von Smoochy
Meiner Überzeugung nach muss eine Internetseite egal auf welchem Browser nahezu gleich aussehen!

auch mit lynx?
Gegenfrage: Ist in den Anforderungen definiert worden, was ein unterstützender Browser ist? Bei mir ist Lynx eigentlich nie einer (nicht notwendig) bzw. wird durch solide "Zugänglichkeit" und Semantik nahezu automatisch erreicht. So ganz dumm ist Lynx meines Erachtens eh nicht..

Original von Smoochy
Meiner Überzeugung nach muss eine Internetseite egal auf welchem Browser nahezu gleich aussehen!
Und da nach meinen Stats die IE < 7 Nutzer noch ca. 40 % ausmachen, halte ich es für angebracht lieber eine solche Lösung zu nutzen
gruß

---
Schlagt mich, aber sehe ich anders.
Die neueste Version von CounterStrike muss ja auch nicht auf einem Commodore 128 spielbar sein oder?
Verzeiht mir den Vergleich, aber jeder weiss denke ich was ich meine.
mfg
Sensei

Der Vertgleich hinkt aber gewaltig, da es jetzt nicht mehr viele Leute gibt die auf nem Commodore im Netz surfen..

Senseis Vergleich passt eher zu IE7 Linx. Besser wäre der Vergleich, ob neue Spiele noch auf Win 9x laufen.

Ich wollte doch nur durch übertreibung meine Intention unterstreichen :'(
Aber ihr habt natürlich Recht
mfg
Sensei