PNG Transparenz Test

Ich wusste doch, dass es irgendwo eine brauchbare Lösung gibt und glaube sie auch gefunden zu haben :-) Im Folgenden habe ich 3 Mal dieses PNG24 Bild mit Alpha-Transparenz auf unterschiedliche Art eingebunden:

als normales Bild:
transparentes PNG

als Bild mit Link:
transparentes PNG

Als Hintergrundbild.
Wenn man das Bild als Hintergrundbild für einzelne Elemente einsetzen will, muss background: transparent url(...); verwendet werden, siehe Quelltext p#test.

QED ;-)

So geht's:

Bitte für die Änderungen in den Dateien kein automatisches Seitenerstellungsprogramm benutzen, das kann schief gehen!

Zwischen die beiden Tags <head> und </head> muss folgendes eingefügt werden:

<!--[if lte IE 6]>
	<script type="text/javascript"	src="supersleight.js"></script>
<![endif]-->

Der Pfad zu der supersleight.js Datei muss natürlich angepasst werden. Am besten wäre es, wenn die Script Datei in ein eigenes Verzeichnis namens script/ entpackt würde und auf allen Seiten, an denen transparente PNGs verwendet werden sollen, die Adresse zum Script absolut angegeben würde, etwa in der Form:

<!--[if lte IE 6]>
	<script type="text/javascript" src="http://www.thundercarp.at/script/supersleight.js"></script>
<![endif]-->

Achtung: In dem Script ist ein Pfad zu einem GIF Bild angegeben! Dieser sollte auch entsprechend angepasst werden. Am besten packt man das x.gif aus der unten verlinkten ZIP Datei direkt mit in das script/ Verzeichnis, öffnet die supersleight.js Datei mit dem Windows Editor Notepad oder einem anderen Text Editor und passt auch dort dem Pfad wie folgt an:

// Path to a transparent GIF image
var shim			= 'http://www.thundercarp.at/script/x.gif';

Danach muss noch am Ende der Seite, direkt vor dem abschließenden </body> Tag folgendes eingefügt werden:

<!--[if lte IE 6]>
	<script type="text/javascript">supersleight.init();</script>
<![endif]-->

und schon kann man PNGs mit Alpha Transparenz auch im IE6 darstellen lassen. Einen Nachteil hat es:
Zum einen muss Javascript aktiv sein, zum anderen kann es in Einzelfällen passieren, dass PNG Bilder-Links plötzlich nicht mehr anklickbar werden, speziell wenn viele PNGs als Link verwendet werden sollen. Meistens liegt es an dem nächsten Bild zu dem nicht funktionierenden Link, dieses müsste dann evtl. durch ein JPG oder GIF ausgetauscht werden oder man kann nur ganz gezielt einzelnen Bilder mit Supersleigh "behandeln" indem man den Aufruf folgenderweise macht:

Zuerst gibt man einem der Umrahmenden <p> oder <div> Elemente eine ID

<div id="meineID">
	<img src="bild1.png" alt="blah">
	<img src="bild2.png" alt="blah">
</div>
<img src="bild3.png" alt="blah">

und dann ändert man den Aufruf an Supersleight am Ende der Seite wie folgt:

<!--[if lte IE 6]>
	<script type="text/javascript">
		supersleigth.limitTo('meineID');
		supersleight.init();
	</script>
<![endif]-->

Durch die zusätzliche Zeile werden dann nur die Bilder innerhalb des umrandenden Elements mit Transparenz versehen. Das beschleunigt auch gleich die Anzeige, da nicht jedesmal eine neue Instanz des Alpha Loaders geöffnet werden muss, was bei älteren Rechnern zu massiven Geschwindigkeitseinbrüchen bis hin zum Stillstand führen kann. Als IDs dürfen nur Buchstaben und Zahlen angegeben werden und als erstes muss ein Buchstabe kommen. Groß und Kleinschreibung müssen beachtet werden, meineid ist nicht gleich MeineID.

Ich hoffe es funktioniert bei Euch genau so gut wie bei mir im IE6 Test. Hier noch die Englisch sprachige Seite mit dem ZIP Download von Supersleight (ziemlich weit unten). Die Datei muss lediglich entpackt und der Inhalt in das passende script/ Verzeichnis auf dem Server gelegt werden.

Anstelle von supersleight.js kann natürlich auch supersleight-min.js aus dem ZIP verwendet werden, das spart ein paar Bytes im Download. Alle Anpassungen sind dan entsprechend durchzuführen.

PS: Nicht vergessen, einen Blick in den Quelltext dieser Seite hier zu werfen ;-)

Zurück zur QuHno.internetstrahlen.de Startseite