php.de

Zurück   php.de > Webentwicklung > HTML, Usability und Barrierefreiheit

HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability.

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 28.07.2006, 15:46  
Erfahrener Benutzer
 
Registriert seit: 14.07.2005
Beiträge: 157
DonTermi
Standard PNG Grafik im Internet Explorer nicht Transparent

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 ?
__________________
[visit Donvelopment.org]
PGP-KeyID: 0xBEC31126]
[Blog:Don's Blog]
DonTermi ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 28.07.2006, 15:53  
Erfahrener Benutzer
 
Registriert seit: 21.05.2008
Beiträge: 2.150
Guradia befindet sich auf einem aufstrebenden Ast
Standard Re: PNG Grafik im Internet Explorer nicht Transparent

Zitat:
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.
Guradia ist offline   Mit Zitat antworten
Alt 28.07.2006, 16:18  
da schreibt der ElePHPant
 
Benutzerbild von Flor1an
 
Registriert seit: 18.06.2008
Beiträge: 8.903
PHP-Kenntnisse:
Fortgeschritten
Flor1an ist ein wunderbarer AnblickFlor1an ist ein wunderbarer AnblickFlor1an ist ein wunderbarer AnblickFlor1an ist ein wunderbarer AnblickFlor1an ist ein wunderbarer AnblickFlor1an ist ein wunderbarer AnblickFlor1an ist ein wunderbarer Anblick
Standard

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.
Flor1an ist offline   Mit Zitat antworten
Alt 28.07.2006, 17:47  
Erfahrener Benutzer
 
Benutzerbild von DER_Brain
 
Registriert seit: 18.04.2005
Beiträge: 1.541
PHP-Kenntnisse:
Fortgeschritten
DER_Brain ist zur Zeit noch ein unbeschriebenes Blatt
Standard

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


Erkennt sogar der IE.


mfg
Andi
DER_Brain ist offline   Mit Zitat antworten
Alt 28.07.2006, 17:50  
Erfahrener Benutzer
 
Registriert seit: 21.05.2008
Beiträge: 2.150
Guradia befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
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.
Guradia ist offline   Mit Zitat antworten
Alt 28.07.2006, 17:52  
Erfahrener Benutzer
 
Benutzerbild von DER_Brain
 
Registriert seit: 18.04.2005
Beiträge: 1.541
PHP-Kenntnisse:
Fortgeschritten
DER_Brain ist zur Zeit noch ein unbeschriebenes Blatt
Standard

"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
DER_Brain ist offline   Mit Zitat antworten
Alt 28.07.2006, 18:09  
Erfahrener Benutzer
 
Registriert seit: 21.05.2008
Beiträge: 9.937
Zergling-new wird schon bald berühmt werden
Standard

Oder CSS:
Code:
	<!--[if gte IE 5]>
	<style type="text/css">
		.containerClass {
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
			(src='/pfad/zum.png');
		}
	</style>
	<![endif]-->
Wobei containerClass dann zB dem die Grafik umschließenden <div> zugeordnet werden kann.
Zergling-new ist offline   Mit Zitat antworten
Alt 29.07.2006, 09:24  
Erfahrener Benutzer
 
Benutzerbild von DER_Brain
 
Registriert seit: 18.04.2005
Beiträge: 1.541
PHP-Kenntnisse:
Fortgeschritten
DER_Brain ist zur Zeit noch ein unbeschriebenes Blatt
Standard

wow... kannte ich noch gar ned


Klingt gut!
DER_Brain ist offline   Mit Zitat antworten
Alt 30.07.2006, 14:46  
Erfahrener Benutzer
 
Registriert seit: 27.10.2004
Beiträge: 1.093
PHP-Kenntnisse:
Fortgeschritten
Chr!s
Standard

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).
Chr!s ist offline   Mit Zitat antworten
Alt 02.08.2006, 17:00  
Erfahrener Benutzer
 
Registriert seit: 21.05.2008
Beiträge: 9.937
Zergling-new wird schon bald berühmt werden
Standard

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".
Zergling-new ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
probleme bei internet explorer und firefox igron PHP Tipps 2008 0 12.05.2008 17:27
Box Modell Problem zwischen Internet Explorer 6 und FireFox DonTermi HTML, Usability und Barrierefreiheit 5 07.12.2006 16:30
IFrame im Internet Explorer verstecken duerov HTML, Usability und Barrierefreiheit 1 13.09.2006 17:21
sql abfrage via php -> problem mit Internet Explorer slacker PHP Tipps 2006 2 08.06.2006 12:14
session funktionieren im internet explorer nicht flflfl PHP Tipps 2006 5 07.04.2006 16:11
Problem mit Internet Explorer PHP Tipps 2006 11 03.01.2006 12:25
LLink funktioniert im Internet Explorer nicht. HTML, Usability und Barrierefreiheit 17 28.12.2005 16:47
[Erledigt] Internet Explorer neu installieren / reparieren Off-Topic Diskussionen 12 11.12.2005 18:51
submitbutton als image. firefox ok, internet explorer nicht? Promaetheus HTML, Usability und Barrierefreiheit 8 28.11.2005 10:47
[Erledigt] Internet Explorer und CSS.. Chr!s HTML, Usability und Barrierefreiheit 4 25.05.2005 18:17
internet explorer kann nichts rechts ausrichten janni HTML, Usability und Barrierefreiheit 6 24.05.2005 17:27
Kommt der neue Internet Explorer? imported_Ben Off-Topic Diskussionen 51 18.03.2005 11:03
[Erledigt] function targetLink(URL) problem mit internet explorer HTML, Usability und Barrierefreiheit 4 11.01.2005 19:24
Problem: Internet Explorer zeigt DIV fehlerhaft an HTML, Usability und Barrierefreiheit 13 04.01.2005 17:10
[Erledigt] Mozilla / Internet Explorer Juuro HTML, Usability und Barrierefreiheit 7 22.06.2004 07:29

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
png grafik transparent, png grafik transparent machen, png grafik tranzparent machen, png barrierefrei, transparente png-grafiken, png grafik transparenz, http://www.php.de/html-usability-und-barrierefreiheit/41422-png-grafik-im-internet-explorer-nicht-transparent.html, ie erkennt kein png transparenz, internet explorer erkennt png nicht, internet explorer img transparent, ie6 transparency, replace png ie6, ie 6 erkennt kein transparent, erkennt png transparenz, php in mozilla bilder transparent im ie nicht, grafik wird nicht transparent, png bilder transparent, html png grafik internet explorer, ie erkennt keine png, png im explorer nicht tranzparent

Alle Zeitangaben in WEZ +2. Es ist jetzt 04:30 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum

Creative Commons License
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.