Html: +/- Verwendung transparenter PNGs

**ContainerDriver** · 30-11-2004, 15:41

Servus.

Ich arbeite gerade an einer neuen Internetseite.
Jetzt würde ich auch gerne (semi)transparente PNGs verwenden, weil sich damit doch recht tolle Effekte erzielen lassen (und vor allen Dingen sind die transparenten PNGs recht wartungsarm, wenn man z.B. den Hintergrund der Seite ändert).
Allerdings weiß ja jedermann, das der Internet Explorer von Microsoft keine (halb)transparenten PNGs unterstützt. Und das ist scheinbar ein Problem.

Also,

Vorteile
======
- wartungsarm
- sieht schön aus

Nachteile
=======
- funktioniert nicht im oben erwähnten Browser

Und jetzt weiß ich nicht, was ich machen soll.

Wie haltet ihr es?
Verwendet hier solche PNGs oder lasst ihr es lieber bleiben (zu Gunsten einer mit allen Browsern leserlichen Seite)?

Gruß, Florian

**Jana** · 30-11-2004, 17:11

Was sind denn (halb)transparenten PNGs?
Mit transparenten PNGs hatte ich noch nie Probleme.
Auch wenn Teile des Bildes transparent waren klappte es einwandfrei.

**ContainerDriver** · 30-11-2004, 17:34

Hi!
Halbtransparente PNGs sind PNG mit "alphablending".
Schau mal auf http://enlightenment.org/pages/main.html. Am unteren Rand siehst du ein Bild (http://enlightenment.org/pages/i/bottom.png). Das ist halbtransparent (das meine ich zumindest damit).

Gruß, FLorian

**peschmae** · 30-11-2004, 20:00

Das musst du von Fall zu Fall entscheiden denke ich.

Kriterien:
- Geschäftsauftritt oder so (dann geht sowas natürlich nicht) oder private Homepage
- Zielpublikum (wobei da kann man sich verschätzen, meine HP ist recht klar Linuxgerichtet und hat trotzdem einen recht grossen Anteil IE-Nutzer)
- Wie siehts denn im Betreffenden Bösewicht aus? Hässlich? Oder gehts noch so (zumindest leserlich sollte es schon sein).

Zu meiner Homepage gibts diesbezüglich nichts zu sagen weil ich so gut wie keine Bilder habe - und erst recht keine Transparenten.

MfG Peschmä

**Jana** · 01-12-2004, 19:54

Mit allen Bowsern wird es nicht funktionieren.
Ich habe dir aber etwas in das Verzeichnis
http://www.agenda21.dillingen.de/CBE.html
gestellt. Kannst da mal rumbasteln.

capicu · 02-12-2004, 08:08

kopier das script ganz unten z.B. in eine JS-Datei "trans.js" und binde diese dann auf der gewünschten seite ganz am Schluss ein mit

Code:

<script language="JavaScript" src="trans.js"></script>

und plötzlich stellt der IE alle semi-transparenten PNG's perfekt dar

Code:

// (c) dynarch.com 2003
// Author: Mihai Bazon, http://dynarch.com/mishoo/

if(/MSIE (5\.5|6).*Windows/.test(navigator.userAgent)) (function() {
	// fucked-up browser (Internet Explorer for Windows)
	var blank = new Image;
	blank.src = 'blank.gif';
	var imgs = document.getElementsByTagName("img");
	for (var i = imgs.length; --i >= 0;) {
		var img = imgs[i];
		var src = img.src;
		if (!/\.png$/.test(src))
			continue;
		var s = img.runtimeStyle;

		// brauchts die folgenden 2 Zeilen??  (bei Problemen entfernen)
		s.width = img.offsetWidth + "px";
		s.height = img.offsetHeight + "px";

		s.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
		img.src = blank.src;
	}
})();

die andern browser (opera, mozilla) solltens auch sonst tun..

(ich weiss, nicht der perfekte weg, aber es klappt.....)

gruss capicu

**RapidMax** · 02-12-2004, 22:50

@capicu: Der ist ja geil! (Sorry die Ausdrucksweise, aber ich konnte nicht anders...)

Ich verwende in Webseiten prinzipiell PNGs, ausser für Fotos (jpeg). Bis jetzt is es mir immer gelungen die Transparenzen zu vermeiden. Ich will keine Besucher ausschliessen, auch keine IE-Benutzer. Zwar kann es sein, dass die Seite im IE nicht optimal aussieht, aber sie bleibt benutzbar. Schwarze Grafiken führen meist dazu, dass die Seite nicht mehr richtig benutzbar ist (weil nicht lesbar), und deshalb verzichte ich momentan noch darauf. Der oben gepostete Flicken wird das in Zukunft ändern. Denn wenn ich sowieso das Box-Model hacken muss, dann fällt dieser Flicken nicht mehr gross ins Gewicht.

Für nächstes Jahr wünsche ich mir, dass alle Browser (und auch der IE) CSS >=2.0, Transparenzen im PNG und SVG unterstützen *träum*.

Gruss, Andy

capicu · 03-12-2004, 08:02

microsoft sollte es wohl hinkriegen, das einzubauen!

mit dem trick geht's ja.... seltsam...

ich war auch sehr froh als ich das script gefunden habe!

**ContainerDriver** · 03-12-2004, 13:35

Also erst mal vielen Dank für euere Mühen!

Zum Skript vom capicu: so etwas wollte ich vermeiden bzw. ist es mir sogar unmöglich zu benutzen, denn
1. muss der gefundene Browser (durch den user agent) nicht immer dem tatsächlich benutzten Browser entsprechen (und z.B. opera (wenn er sich als IE ausgiebt) kann mit dem Konstrukt dann nichts anfangen)
2. ich benutze vor allen Dingen Hintergrundbilder die halbtransparent sind, und diese binde ich mit css ein, um so einfach das Aussehen der Seite über eine Datei steuern zu können => es gibt im Grunde keine img-Tags.

Trotzdem vielen Dank!

Ich habe mich jetzt übrigens für den Einsatz von solchen PNGs entschieden, da
1. PNG das empfohlene Bildformat des W3C ist,
2. Microsoft seit vier Jahren von diesem Missstand weiß (stand auf der Seite für die PNG-Petition für den IE), das der IE keine PNGs mit alpha blending anzeigen kann,
3. der IE sehr wohl derartige PNGs anzeigen kann, allerdings nur mit IE-spezifischen Code (also Code, den nicht jeder Browser versteht), d.h. der IE ist in der Lage das richtig anzuzeigen, man soll aber IE-Code verwenden, um die Bilder darstellen zu können (und damit mit, meine ich, wird versucht, die Monopolstellung des IE zu festigen, um Seitenautoren zu zwingen (die PNGs verwenden wollen), den IE-Code zu verwenden, was dazu führt, das andere Browser die Seite nicht darstellen können).

Ich versuche zwar immer meine Seiten möglichst so zu erstellen, das sie in allen Browsern korrekt dargestellt werden, allerdings verzichte ich darauf, wenn damit der ganze Ansatz (Kapselung des Layouts in css-Dateien, keine JavaScript Verwendung) versaut wird.

Gruß, Florian

**BlueJay** · 04-12-2004, 09:07

Zitat von florian hanisch

[PNG]
Nachteile
=======
- funktioniert nicht im oben erwähnten Browser

... und die PNGs sind doppelt so groß wie die entsprechenden GIFs

weiterer Vorteil aber: größere Farbtiefe

Wie haltet ihr es?

Solange die PNGs keine Transparenz enthalten, nhme ich sie auch, sonst verzichte ich schweren Herzens auf den Alpha-Kanal und nehme GIFs. Bei Halbtransparenz wird getrickst, was auch ganz gut klappt, es sei denn, man hat ein TFT-Display, und der Unterschied Vordergrund zu Hintergrund ist zu kraß.

Die Trickserei mit Javascript ist IMHO den Aufwand nicht wert.
Wer es dennoch anwenden will, sollte auf runtimeStyle abfragen statt auf die Browserkennung.

so long,
BlueJay

**cybercrow** · 04-12-2004, 17:56

Zitat von florian hanisch

Ich habe mich jetzt übrigens für den Einsatz von solchen PNGs entschieden, da
1. PNG das empfohlene Bildformat des W3C ist,
2. Microsoft seit vier Jahren von diesem Missstand weiß (stand auf der Seite für die PNG-Petition für den IE), das der IE keine PNGs mit alpha blending anzeigen kann,
3. der IE sehr wohl derartige PNGs anzeigen kann, allerdings nur mit IE-spezifischen Code (also Code, den nicht jeder Browser versteht), d.h. der IE ist in der Lage das richtig anzuzeigen, man soll aber IE-Code verwenden, um die Bilder darstellen zu können (und damit mit, meine ich, wird versucht, die Monopolstellung des IE zu festigen, um Seitenautoren zu zwingen (die PNGs verwenden wollen), den IE-Code zu verwenden, was dazu führt, das andere Browser die Seite nicht darstellen können).

imho die richtige Entscheidung, würde ich auch so machen.
Ein Browser hat nirgend ein Monopol, auch nicht auf windows. Jeder kann selber entscheiden was er verwendet, ohne dabei zusätzliche Kosten zu haben.
Auf der Seite des Hompeagebetreibers kannst du dich nur an den Standard (w3c) halten, der Rest liegt in der Hand des Benutzers. Wenn er will kann er einen Browser benutzen der sich sehr gut an den Standard hält und hat somit keine Probleme. Will er das nicht, dann ist es seine Entscheidung, dann trifft dich aber keine Schuld, du kannst nicht mehr machen wie sauberes HTML schreiben und freie und für alle dokumentierte Formate zu verwenden.

**msi** · 05-12-2004, 19:22

hallo,

gibt es auch eine möglichkeit, dem ie transparenz bei pngs beizubringen, die man in stylesheet elementen als hintergrundbild benutzt??

danke Markus

**msi** · 05-12-2004, 20:55

hallo,

http://www.koivi.com/ie-png-transparency/
funktioniert auch bei stylesheets, die durch diese funktion mit interpretiert werden.
angabe des bildes muss in ' erfolgen und nicht in ", da der code es sonst nicht erkennt, kann man natürlich anpassen.
background-image: url('/gfx/tcat.png');

capicu · 06-12-2004, 07:32

Zitat von msi

hallo,

http://www.koivi.com/ie-png-transparency/
funktioniert auch bei stylesheets, die durch diese funktion mit interpretiert werden.
angabe des bildes muss in ' erfolgen und nicht in ", da der code es sonst nicht erkennt, kann man natürlich anpassen.
background-image: url('/gfx/tcat.png');

sauber danke! das hab ich genau noch gesucht.... tolles forum

EDIT: ich merk grad dass das beispiel-bild auf der seite nicht funktioniert mit dem IE

... war zuerst mit dem opera drauf ^^

Mactabilis · 07-01-2005, 12:32

Ich habe sowohl das JavaScript als auch das php script versucht auf meiner png-bilder seite einzubinden doch komme nicht zu einem einwandfreien ergebnis.

Ihr koennts euch ja mal HIER anschauen.

Irgend eine Idee was falsch ist ? Das javascript ist ganz utnen eingebunden, und das php script von der andern site ist auch korreckt eingebunden !

Thema: Html: +/- Verwendung transparenter PNGs

Themen-Optionen

Thema bewerten

Anzeige

Html: +/- Verwendung transparenter PNGs

Lesezeichen

Lesezeichen

Berechtigungen