Transparentes PNG im IE 5.5+

[Angel_de]

Hallo (einmal mehr),

habe soeben versucht nach folgender Anleitung
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
ein transparentes PNG (funzt im IE7+FF) für IE5.5+ zu implementieren.

Habe eine blank.gif, pngbehavior.htc
(mit folgendem Inhalt)

<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>

folgendem Eintrag in meiner CSS :

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

und das Bild so im XHTML-Code eingebunden

<img src="blank.gif" style="width: 277px; height: 287px; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mann.png', sizingMethod='scale')" />

Leider wird mir jetzt garnichts mehr angezeigt :-( Hat jemand einen Tipp oder sieht evtl. einen Fehler ?

[phpBuddy]

Das PNG einfach in ein transparentes GIF umzuwandeln wäre zu einfach, oder?

[Angel_de]

Als GIF schaut das leider ziemlich bescheiden aus :-(

[Angel_de]

Hmm ... hab jetzt nur die htc und das im css genommen ...

und er (IE7, IE6.0, IE5.5) zeigt ebenfalls kein Bild an.

Nehm ich den css-eintrag wieder raus, dann zeigt der IE7 es richtig und die anderen eben mit einer dunklen Fläche an - da wo es eigentlich transparent sein sollte.

[Angel_de]

Für alle, die vl. mal mit dem selben Problem kämpfen -
Habe es nun mal mit einer htc von einer anderen Seite probiert und nun geht alles wunderbar.

Hier der Link zu einer getesteten und funktionierenden Version/Anleitung
http://bjorkoy.com/post/show/8