Bilder übereinander legen

[CL90]

Ich habe vor eine art Coverflow zu gestallten. Das ganze aber ohne Flash. da ich flash nicht behersche.
etwa wie dieses schema:

_______       ________
|bild1 |     | bild3  |
|     _________       |
|    |         |      |
|    |         |      |
|____|  Bild2  |______|
     |         |
     |_________|

ich hab bisher <layer> mit dem above="name" versucht. in einem anderem anlauf habe ich es mit z-index probiert. beides ohne erfolg. ich arbeite mit margin-left: -??px. weil ich eigentlich keine absoluten positionierungen machen möchte, weil das ja bekantlich hier und da probleme gibt und ich mir eigentlich noch gestalterischen freiraum lassen.

Das php script wird die Bilder von links nach rechts ausgeben. dh wie in dem chema.
eine mir bekannte lösung wäre es. die bilder in anderer reihenfolge auszugeben. aber das wäre keine schöne lösung des problems.

welche möglichkeiten habe ich noch, bilder übereinander zu legen. :)

mfg Chris

 

[w7]

Mit z-index sollte es gut funktionieren, die Dokumentation von CSS4You ist hier ausführlich:
z-index: Überlappung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Es gäbe auch die Möglichkeit die canvas-Funktionen von HTML5 zu nutzen. Es wird dabei von folgenden Browsern unterstützt:
* Firefox 1.5+
* Opera 9.5+
* Safari
* Google Chrome

Für den Internet Explorer gibt es ein Workaround von Google, excanvas.js.

Nun zum Coverflow: Du integrierst Bilder mit drawImage() in den Coverflow, verschiebst sie über translate(x-Koordinate, y-Koordinate) und kannst mit scale(x-Koordinate, y-Koordinate) zoomen. Für die seitlich angeordneten Bilder kannst du noch eine Drehung mit rotate(Winkel in Grad) durchführen.