PNG Grafik im Internet Explorer nicht Transparent

DonTermi

Dabei seit: 14.07.2005

Beiträge: 157
#1

PNG Grafik im Internet Explorer nicht Transparent

28.07.2006, 14:46

Hoffe ich bin in diesem Forum richtig.

Ich habe auf einer Webseite in Bild mit einem Transparenten Hintergrund. Habe es extra als PNG abgespeichert. Im Firefox wird das Bild richtig dargestellt. Im Internet Explorer wird allerdings die Transparenzfarbe weiß gefüllt.

Unterstützt der IE keine PNGs mit transparenter Farbe ?

http://www.donvelopment.org
Stichworte: -
Guradia

Dabei seit: 21.05.2008

Beiträge: 2148
#2

28.07.2006, 14:53

Re: PNG Grafik im Internet Explorer nicht Transparent

Zitat von DonTermi

Unterstützt der IE keine PNGs mit transparenter Farbe ?

IE <= 6, richtig ... keine transparenten PNGs
IE 7, doch, der kanns.

Es gibt ein JavaScriptchen, dass einen ActiveX-alphaFilter auf den PNGs aktivieren kann und damit auch in älteren IEs die transparenz wieder herstellt ... erfolgreich angewendet habe ich das aber noch nicht.
Kommentar

Flor1an

Dabei seit: 18.06.2008
Beiträge: 10040

28.07.2006, 15:18

Mh hier ist das JavaScript:

Code:

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');\"></span>"
            img.outerHTML = strNewHTML
            i = i-1
        }
    }
}
window.attachEvent("onload", correctPNG);

Einfach so irgendwie in die Seite einbinden und fertig.

Kommentar

DER_Brain

Dabei seit: 18.04.2005

Beiträge: 1540
#4

28.07.2006, 16:47

Oder einfach ein gif file draus machen und ebenfalls transparent darstellen lassen.

Erkennt sogar der IE.

mfg
Andi
Kommentar
Guradia

Dabei seit: 21.05.2008

Beiträge: 2148
#5

28.07.2006, 16:50

Zitat von DER_Brain

Oder einfach ein gif file draus machen und ebenfalls transparent darstellen lassen.

Erkennt sogar der IE.

gar nicht nötg, 8bit-index-png geht auch. Ist equivalänt zu gif, die tranzparenzqulität also ein witz.
Kommentar
DER_Brain

Dabei seit: 18.04.2005

Beiträge: 1540
#6

28.07.2006, 16:52

"8bit-index-png".... Never heard...

Kann man das auch mit normalen Grafikprogrammen wie z.b. gimp machen?

Naja, also ich verwende für transparente Grafiken meistens nur gif... Ist eigentlich egal, was man nimmt, ob es nun png, 8bit-index-png oder gif ist.

mfg
Andi
Kommentar
Zergling-new

Dabei seit: 21.05.2008

Beiträge: 9931
#7

28.07.2006, 17:09

Oder CSS:

Code:



Wobei containerClass dann zB dem die Grafik umschließenden <div> zugeordnet werden kann.
Kommentar
DER_Brain

Dabei seit: 18.04.2005

Beiträge: 1540
#8

29.07.2006, 08:24

wow... kannte ich noch gar ned

Klingt gut!
Kommentar
Chr!s

Dabei seit: 27.10.2004

Beiträge: 1090
#9

30.07.2006, 13:46

Diese CSSDeklarationen habe ich noch nie zum laufen gebrahct - geschweige denn .htc Dateien oder sonstige Filter. Die JavaScript Funktion von RaZoR läuft. Is zwar JavaScript, aber als Übergang geht es schonmal (bis ich endlich das CSS zum Laufen gebracht hab).
Kommentar

Zergling-new

Dabei seit: 21.05.2008
Beiträge: 9931

#10

02.08.2006, 16:00

Ich hab die Funktion mal ab- und umgeschrieben um die Funktionsweise des Patches zu verstehen und für meine Zwecke anzupassen.

Ich dachte irgendwie immer, es wird über das bestehende PNG-Bild ein Filter geworfen der es transparent macht. Aber es muss ja das alte Bild verworfen und mit dessen Pfad ein neuer Container mit Filter erstellt werden.

Code:

    <script type="text/javascript">
    <!--
    	/**
    	 * Microsoft Internet Explorer semi-transparency patch 
    	 */
		function optimizePNG()
		{
			// loop all images
			for (var i = 0; i < document.images.length; i++) {
				var img = document.images[i];
				var src = img.src;
				var ext = src.substr(src.length - 3, 3);
				// image extension png? 
				if (ext.toLowerCase() == "png") {
					// yes png!
					
					// create new container element
					var container = document.createElement("span");
					
					// transparency patch
					container.style.cssText = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
						+ (img.src)
						+ "', sizingMethod='scale')";
					
					// set container properties
					container.style.display = "inline-block";
					container.style.width   = img.width  + "px";
					container.style.height  = img.height + "px";
					
					// adopt link behaviour
					var par = img.parentNode;
					if (par.tagName.toLowerCase() == "a")
						container.style.cursor = "hand";
					
					// adopt title
					if (img.alt.length > 0)
						container.title = img.alt
					else if (img.title.length > 0)
						container.title = img.title;
					
					// adopt alignment
					if (img.align == "left")
						container.style.float = "left";
					else if (img.align == "right")
						container.style.float = "right";
					
					// adopt class name
					if (img.className.length > 0)
						container.className = img.className;
					
					// replace <img> with patched container
					par.replaceChild(container, img);
				}
			}
		}
		
		if (document.all && !window.opera)
			window.onload = optimizePNG;
	//-->
	</script>

Sollte in die Webseite integrierte <img> PNGs "patchen".

Kommentar

DonTermi

Dabei seit: 14.07.2005

Beiträge: 157
#11

07.08.2006, 07:47

Danke erstmal für die Hilfreichen antworten.

Das die Grafik ein PNG sein muß hat seinen Grund. Es geht um die Farben. Bei den Bildern handelt es sich um Modelfotos. Daher wäre GIF mit nur 256 Farben unzureichend. Daher hatte ich mich für png entschieden.

Aber gut zu wissen das es am Browser (IE) selbst liegt wegen der Darstellung.

http://www.donvelopment.org
Kommentar
stefanjann

Dabei seit: 02.08.2005

Beiträge: 253
#12

08.08.2006, 08:15

Noch kurz eine Anmerkung:
PNGs können Teilstransparenzen. Das kann ein GIF nicht. Als kann man bei einen PNG den Hintergrund durchschimmern lassen. Ein PNG-8-Bit kann das (wie ein GIF) auch nicht.

SELECT * benutze ich nur um den Post kurz zu halten.
Kommentar
PsychoEagle

Dabei seit: 21.08.2007

Beiträge: 1280
#13

08.08.2006, 10:01

Warum wird bzw wurde das eigentlich (noch) nicht im IE eingeführt? Ich finde sowas ziemlich sinnvoll bei der Seitengestaltung. Ist es eigentlich im 7er integriert? (sry, will nicht zu arg ins OT, aber es interessiert mich und da passt es gerade sehr gut hier rein )

[I]"Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)[/I]
Kommentar
stefanjann

Dabei seit: 02.08.2005

Beiträge: 253
#14

08.08.2006, 10:14

Wie schon weiter oben in einem Beitrag steh ist das im IE7 integriert. Ich habs auch schon im IE7 gestestet. PNGs werden im IE7 richtig (incl Transparenzen und Durchschimmern) angezeigt.

SELECT * benutze ich nur um den Post kurz zu halten.
Kommentar

Zergling-new

Dabei seit: 21.05.2008
Beiträge: 9931

#15

15.10.2006, 18:58

Kleines Update für die JS-Funktion:

Code:

/**
* Microsoft Internet Explorer semi-transparency patch
*/
function pngPatch()
{
	// save image objects, because they will be replaced in next loop
	var imageList = new Array();
	for (var i = 0; i < document.images.length; i++) {
		imageList[i] = document.images[i];
	}
	
	// loop all images
	for (var k = 0; k < imageList.length; k++) {
	   var img = imageList[k];
	   var src = img.src;
	   var ext = src.substr(src.length - 3, 3);
	   // image extension png?
	   if (ext.toLowerCase() == "png") {
	      // yes png!
		  
		  // create new container element
		  var container = document.createElement("span");
		  
		  // transparency patch
		  container.style.cssText = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
			 + (img.src)
			 + "')";
		  
		  // set container properties
		  container.style.display = "inline-block";
		  container.style.width   = img.width  + "px";
		  container.style.height  = img.height + "px";
		  
		  // adopt link behaviour
		  var par = img.parentNode;
		  if (par.tagName.toLowerCase() == "a")
			 container.style.cursor = "hand";
		  
		  // adopt title
		  if (img.alt.length > 0)
			 container.title = img.alt
		  else if (img.title.length > 0)
			 container.title = img.title;
		  
		  // adopt alignment
		  if (img.align == "left")
			 container.style.float = "left";
		  else if (img.align == "right")
			 container.style.float = "right";
		  
		  // adopt class name
		  if (img.className.length > 0)
			 container.className = img.className;
		  
		  // replace <img> with patched container
		  par.replaceChild(container, img);
	   }
	}
}
	 
if (document.all && !window.opera)
	window.onload = pngPatch;

Jemand ne Idee, wie ich CSS-Hintergründe damit jetzt auch noch patchen kann?

Ankündigung

PNG Grafik im Internet Explorer nicht Transparent

Neue Werbung 2019