Willkommen in der Webstatt Zum Webstatt Blog und Stories
Gali am 04.09.06 09:48

Hi,

mir wurde euer Forum von einem I-Net-'Kollegen' empfohlen. =)

Ich hoffe ihr könnt mir weiterhelfen :). Und zwar möchte ich mehrere Bilder (manchmal bis zu 20) übereinander legen. Das ganze habe ich zuerst mit Tabellen versucht, cellspacing auf 0 und dachte, das würde schon gehen :).

Das sah dann in etwas so aus:

<table width=80 height=80 border=0 cellspacing=0><tr><td width=80 height=80 bgcolor=red>
<table width=80 height=80 border=0 cellspacing=0><tr><td width=80 height=80 bgcolor=green>
<table width=80 height=80 border=0 cellspacing=0><tr><td width=80 height=80 bgcolor=yellow>
<table width=80 height=80 border=0 cellspacing=0><tr><td width=80 height=80 bgcolor=blue>
<table width=80 height=80 border=0 cellspacing=0><tr><td width=80 height=80 bgcolor=black>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>


Ich nahm an, das man nun nur schwarz sehen würde - aber drumherum waren je ein 1px breiter blauer, gelber, grüner und roter Rahmen. Somit wäre das 'Bild' schon 8 Pixel breiter und höher. Dann habe ich mich etwas per google schlau gemacht und diese Variante gesehen

<IMG style="position: relative; Z-INDEX: 1" src="picture.gif"><BR>
<IMG style="position: relative; top: -80px; Z-INDEX: 2" src="picture.gif"><BR>
<IMG style="position: relative; top: -160px; Z-INDEX: 3"src="picture.gif">


Das funktionierte vom Prinzip her, nur wenn ich nun beispielsweise noch <br>Text ranhänge, dann steht der nicht direkt unter dem zusammengefügten Bild sondern eben so weit unten - als wenn die Bilder untereinander liegen würden.

Mit absoluten Positionen funktioniert es sicher auch, nur arbeite ich sehr viel mit Tabellen und die Bilder müssen ständig woanders eingefügt werden. Deswegen ist die Variante leider auch nicht so passend.

<IMG style="position: absolute; Z-INDEX: 1" src="picture.gif"><BR>
<IMG style="position: absolute; top: -80px; Z-INDEX: 2" src="picture.gif"><BR>
<IMG style="position: absolute; top: -160px; Z-INDEX: 3"src="picture.gif">


Und nun mein Bitte ob jemand von euch vlt. eine geeignetere Möglichkeit kennt :)

Danke im Vorraus,
mfg Gali

netcup.de Warum gibt es hier Werbung?
Christian am 04.09.06 10:08

Entschuldige, aber könntest du ggf genauer beschreiben was es bringen soll, 20 bilder übereinander zu lagern, wenn man doch eh nur das oberste sieht?

Zudem sei angemerkt, von Tabellen als Designgrundlage ist abzuraten.

Michael Michael am 04.09.06 10:38

Suckers Frage ist durchaus berechtigt.
Man könnte beispielsweise ein DIV richtig positionieren und darin ein Bild anzeigen. Wenn das nächste angezeigt werden soll könnte man mit JS einfach das IMG auswechseln (bzw das SRC Attribut).

Ansonsten:
z-index klappt nur mit position: absolute;
Du könntest aber ein DIV (mit position: relative;) irgendwo einbinden und den IMG darin position: absolute; geben. Dann ist der Rahmen nur das relativ positionierte DIV.
LEFT: 0px; TOP: 0px; also die obere linke Ecke in dem DIV.
Dann könnte auch z-index klappen.

Michael

milahu milahu am 04.09.06 16:18

Nur so nebenbei: Elementnamen werden in XHTML klein geschrieben. Schont die Shift-Taste.

Um mal Michaels Idee (die ich hoffentlich auch richtig verstanden habe ;-) zu veranschaulichen:

<div id="stapel">
<img id="img1" src="img1.jpg" />
<img id="img2" src="img2.jpg" />
<img id="img3" src="img3.jpg" />
</div>

#stapel{width:100px;height:100px}
#stapel img{position:absolute}

Um nun z.B. bei hover ein Bild davon nach vorne zu holen:

#stapel:hover #img2{z-index:999}
PS: Inline-Style-Angaben sind auch unter aller Sau :P

Michael Michael am 04.09.06 16:24

Ja genau so war es gemeint.
Als Anregung würde ich bei div#stapel noch position: relative; ergänzen.
Weiterhin krankt der IEX ja bekanntlich bei #stapel:hover img - soweit ich weiß muss man hier auf eine JS Lösung zurückgreifen

Grob

var element = document.getElementById('img2');
element.style.z-index = '999';

Gali am 04.09.06 17:19

Warum ich die Bilder übereinander legen möchte? Weil dadurch eine Person dargestellt wird. Man wählt z.B. einen Körper, darauf kommt ein Kopf, welcher verschiedene Frisuren und Bartwuchs hat. Und damit ich nicht über 3.000 Pixelarbeiten machen muss, mache ich ~50 und setzte dann die Teile zusammen. Die Datein sind im Beispiel 80x80 groß. Das sind dann natürlich alles gif-Datein damit diese auch transparent sind. :)

mfg Gali

milahu milahu am 04.09.06 17:29

Du meinst wie South Park Studio? Flash würde sich da eher anbieten als so'ne JS-Mania. ;)

Gali am 04.09.06 18:06

Nur möchte ich ohne Flash arbeiten, immer noch :)

mfg Gali

Gali am 05.09.06 19:08

Keiner mehr eine Idee? :(

Michael Michael am 05.09.06 19:51

Was funktioniert denn an der oben diskutierten CSS Lösung nicht?

Gali am 05.09.06 20:47

Quote
Original von Michael
Was funktioniert denn an der oben diskutierten CSS Lösung nicht?


Gute Frage, funktionier einwandfrei - vielen Dank :)

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt