Problembeschreibung

PNG-Bilder können α-Transparenz. α-Transparenz ermöglicht "halb"-Transparenz, der Hintergrund schimmert durch das PNG-Bild durch.

 

Leider beherrscht der IE diese Transparenz nicht so ohne weiteres. Solange keine α-Transparenz im Bild ist zeigt der IE das Bild auch ordentlich an. Nur für die α-Transparenz sind einige Umwege notwendig.

 

Notwendig für eine korrekte Darstellung ist ein Filter, der einem HTML-Element per Style zugeordnet werden kann. Leider ist der Umgang mit dem Filter auch nicht ganz so einfach, da der IE mit dem Filter jeden Inhalt des HTML-Elementes verdeckt.

 

Außerdem kann der IE 5.0 mit diesem Filter nichts anfangen, muss also nochmal extra behandelt werden.

1.Ansatz

<div style="height:100px; width:160px; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png',sizingMethod='scale');"
></div>

 

 

Nachteil:

in anderen Browsern sieht man nichts.

 

Ausweg:

das Bild wird für alle Browser als Hintergrundbild eingeblendet:

 

 

<div id="bild"></div>

 

mit zugehörigem CSS:

 

#bild {
	height:100px;
	width:160px;
	background-image:url(bild.png);
	//background-image:url();	/* dies entfernt das Hintergrundbild für IE */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png',sizingMethod='scale');	
}

 

 

Würde das PNG als normales Hintergrundbild eingebunden würde der IE die α-Transparenz wieder ignorieren. Also muss das normale Hintergrundbild für den IE wieder entfernt werden.

In dieser Form ist es zwar nicht valide, aber es funktioniert.

Es bleibt das Problem, dass der Inhalt des HTML-Elementes im IE durch das PNG verdeckt wird.

 

2.Ansatz

Wenn man Javascript nutzt ist es möglich das komplizierte Handling zu automatisieren:

 

Am Besten legt man eine eigene Datei für das Javascript an, z.B. "pngfix.js". Einmal angelegt kann sie immer wieder verwendet werden.

 

pngfix.js

 

function correctPNG() {
	for(var i=0; i < document.images.length; i++) {
		var img = document.images[i]
		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 = "< span " + imgID + imgClass + imgTitle
								+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
								+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
								+ "(src=\'" + img.src + "\', sizingMethod='scale');\">";
			img.outerHTML = strNewHTML;
			i = i-1;
		}
	}
}
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	window.attachEvent("onload", correctPNG);
}

function alphaBackgrounds(){
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	for (i=0; i < document.all.length; i++){
		var bg = document.all[i].currentStyle.backgroundImage;
		if (itsAllGood && bg){
			if (bg.match(/\.png/i) != null){
				var mypng = bg.substring(5,bg.length-2);
				document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
				document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
			}
		}
	}
}
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	window.attachEvent("onload", alphaBackgrounds);
}

 

 

Hat man nun Seiten, die PNG-Bilder enthalten fügt man folgende kleine Passage im Header ein :

 

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js" />
<![endif]-->

 

Damit werden automatisch alle auf der Seite befindlichen PNGs mit einem α-Layer versehen, mit dem der IE auch was anfangen kann. Aber nur dann, wenn der Browser auch ein IE ist. Für alle anderen Browser ändert sich nichts.

3.Ansatz

Noch etwas umfassender ist folgendes Javascript:

 

1) Folgende Zeilen im CSS übernehmen:

 

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

 

 

2) Die Datei pngbehavior.htc:

 

 

<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 type="text/javascript">
/*
* 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 = "clear.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>

 

 

3) Hilfs-GIF:

 

Im gleichen Verzeichnis muss noch ein 1px x 1px großes, transparentes GIF-Bildchen ("clear.gif") rein und schon lassen sich die PNG-Dateien problemlos auch im IE darstellen.

 

für TYPO3:

auch wenn die CSS-Datei mit der initialen Zeile zum Aufruf der pngbehavior.htc in einem Unterverzeichnis von fileadmin/ liegt, ist der Pfad zu pngbehavior.htc und zu clear.gif relativ zur eigentlichen Datei (für TYPO3: index.php) zu setzen, bzw. müssen diese beiden Dateien relativ dazu vorhanden sein, was clear.gif normalerweise schon ist.

 

 
Ihre aktuelle Seitenauswahl:  
>>>>