Webstatt.org - Community seit 2006 - 2012 (2024?)

Bilder übereinander legen

user-184
04.09.2006 07:48
Hi,

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

Ich hoffe ihr könnt mir weiterhelfen lächeln. 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 lächeln.

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. user-158n 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 lächeln

Danke im Vorraus,
mfg user-184
user-150
04.09.2006 08: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.
Mehr schlaue Sprüche gibt es auf: anotherstyle.de Psicologia
Avatar user-253
04.09.2006 08: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: relativezwinkern irgendwo einbinden und den IMG darin position: absolute; geben. user-158n 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
Avatar user-255
04.09.2006 14:18
Nur so nebenbei: Elementnamen werden in XHTML klein geschrieben. Schont die Shift-Taste.

Um mal user-251els Idee (die ich hoffentlich auch richtig verstanden habe zwinkern 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 frech
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
Avatar user-253
04.09.2006 14: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'zwinkern;
element.style.z-index = '999';
user-184
04.09.2006 15: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. lächeln

mfg user-184
Avatar user-255
04.09.2006 15:29
Du meinst wie South Park Studio? Flash würde sich da eher anbieten als so'ne JS-Mania. zwinkern
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-184
04.09.2006 16:06
Nur möchte ich ohne Flash arbeiten, immer noch lächeln

mfg user-184
user-184
05.09.2006 17:08
Keiner mehr eine Idee? traurig
Avatar user-253
05.09.2006 17:51
Was funktioniert denn an der oben diskutierten CSS Lösung nicht?
user-184
05.09.2006 18:47
Original von user-251el
Was funktioniert denn an der oben diskutierten CSS Lösung nicht?


Gute Frage, funktionier einwandfrei - vielen user-158k lächeln