exadogg: Bilder exakt übereinander legen durch z-index

Beitrag lesen

Hallo werte Userschaft,

Hallo werter User!

Ich hab aktuell ein Problem, was mich mal wieder zur Verzweiflung treibt:

Kein Wunder findest Du die Lösung nicht! Verzweiflung behindert das logische Denkvermögen...

Ich will verschiedenen teiltransparente PNGs mit z-index so übereinander legen, dass diese ein neues Bild ergeben.
Beispiel: Eine Wiese, dann in einer neuen Ebene ein Fluss, und in einer weiteren Ebene ein Baum.
Alle Grafiken sollen 100*100px groß sein.

Bisher scheiter ich daran, dass in keiner Variation eines Quelltextes das PNG (hab es auch mit anderen Formaten getestet) angezeigt wird. Jetzt entwickeln sich folgende Fragen daraus:

1.) Kann mir jemand helfen, einen für 2 Ebenen funktionierenden Quellcode zu scripten?

Hier mal ein Denkanstoß: In Mozilla-Browsern gibt es die JavaScript-Funktion window.getComputedStyle(). Eine kurze Beschreibung findest Du auf
http://developer.mozilla.org/en/docs/DOM:window.getComputedStyle

Diese Funktion könntest Du in einem JavaScript-Bereich verwenden, um die vom Browser berechnete Position des Bilds in der ersten Ebene dem Bild in der zweiten Ebene zuzuweisen.

2.) Kann man auch eine x-beliebige Anzahl an Ebenen damit produzieren?

Wenn Du mit der o. g. JavaScript-Funktion tatsächlich glücklich wirst, dann dürftest Du problemlos weitere Ebenen damit produzieren können. (Hast Du die berechnete Position des ersten Bildes erstmal in Variablen ausgelesen, kannst Du diese Werte ja beliebig weiteren Bildern zuweisen.)

3.) Gibt es eine Variante über PHP, vgl. Publicons.de, diese Bilder fertig zu generieren, sodass sie nur noch als fertige Grafik ausgegeben werden?

Es gibt ja (nachzulesen auf http://de3.php.net/image) in PHP mehrere Funktionen zum dynamischen Erzeugen von Bildern, aber bevor Du diese im Produktivumfeld einsetzt, solltest Du mal schauen, ob bspw. die Funktion imagecreatefromgif() so tut, wie sie dort beschrieben ist. Wenn nicht, hast Du das gleiche Problem wie ich. Mein Webhoster (1&1) hat nämlich bei meinem Tarif (Home 5.0) dem PHP-Modul zu wenig Arbeitsspeicher zugewiesen, so dass die meisten Funktionen der PHP-Grafikbibliothek GDlib nur eingeschränkt oder überhaupt nicht funktionieren.

Eine schnelle und unkomplizierte Möglichkeit, das zu testen, ist folgende:

1. Du gehst zu http://www.bitfolge.de/snif und lädst Dir die dort angebotene index.php runter.

2. Du lädst diese index.php in ein Bilderverzeichnis auf Deinem Webserver hoch und rufst dieses im Browser auf.

3. Die index.php sollte dann in der ganz rechten Spalte ("Beschreibung" oder "Description") für jedes Bild ein Thumbnail erzeugen. Falls Du dort keine Thumbnails siehst, hast Du das gleiche Problem wie ich. ("Error 4711 - Geiziger Webhoster" ;-)