nicht angemeldet
Hallo liebe Foristen!
Kurz vorweg:
Mir ist bewusst, dass dieses Thema kein neues ist und dass es unzählige Posts dazu im Netz gibt - ich habe viele selber gelesen.
ABER in den meisten Fällen erweisen sich die Lösungsansätze als individuelle Lösung, Blaupausen gibt es beim Programmieren eher selten. Daher hoffe ich, dass ihr trotzdem etwas Geduld aufbringt und Euch mein Problem anhört - vielen Dank!
Die Situation:
Meine Seite ist ein optisch schlicht gehaltenes Portfolio meiner Arbeit. Dies soll sich auch im Quelltext fortsetzen, d.h. ich möchte möglichst vielen Browsern erlauben meine Seite darzustellen und das zügig.
Im Vordergrund steht ein großer Div-Container (1000*500px), welcher sich in der Fenstermitte zentriert und 2 Bilder enthält: 1 Bild (5000*500px), welches den Container durch seine Breite zum "Scroll-Fenster" macht (horizontal) und ein zweites Bild, welches am Ende hinter dem ersten Bild steht und als Link fungieren soll.
Das Problem:
Jetzt soll beim Klicken auf den Link sich der Inhalt des Div-Containers ändern, d.h. entweder beide Bilder durch neue ersetzt werden oder ein neuer Container an die Stelle des alten rücken. Wichtig wäre mir, dass die Inhalte auch nur geladen werden, wenn sie benötigt werden (Stichwort "visible/hide").
Am liebsten würde ich auch OHNE
- AJAX
- PHP
- iframe
- z-index
auskommen, wegen nicht vorhandenen Kenntnissen, Kapazitäten oder der Kompabilität mit gewissen Browsern. Unter JavaScript habe ich Lösungsansätze gefunden die meinen Vorstellungen nahe kamen, sie aber nicht verstanden für mein Problem umzuschreiben.
Der Quelltext soweit (der o.g. Div-Container heißt s5):
<html>
<head><title>CSS versuche EINSTIEG</title></head>
<body>
<style type="text/css">
body { margin:0; padding:0; height:0px; background-image:url(schatten4.jpg);background-repeat:no-repeat;}
#f0 { position:absolute; top:10px; left:10px; width:150px; height:60px; border:0px solid #840; bbackground-color:#000000; }
#s0 { position:absolute; top:35px; left:260px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s1 { position:absolute; top:35px; left:420px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s2 { position:absolute; top:35px; left:530px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s3 { position:absolute; top:35px; left:670px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s4 { position:absolute; top:35px; left:790px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s5 { position:relative; top:160px; margin-left:auto; margin-right:auto; width:1010px; height:550px; overflow:auto; border:0px solid #840;}
</style>
<div id="f0">
<img src="logo3.jpg" alt="link0">
</div>
<div id="s0">
<img src="e_m.jpg" alt="link1">
</div>
<div id="s1">
<img src="p_o.jpg" alt="link2">
</div>
<div id="s2">
<img src="v_o.jpg" alt="link3">
</div>
<div id="s3">
<img src="k_o.jpg" alt="link4">
</div>
<div id="s4">
<img src="i_o.jpg" alt="link5">
</div>
<div id="s5">
<div style="width:9000px">
<img src="portfolio.jpg" style="float:left; width:auto" alt="work">
<img src="link.jpg" style="float:none; width:auto" alt="work">
</div>
</div>
</body>
</html>
Für jede Hilfe & Anregung wäre ich sehr sehr dankbar!
mfG 0-9a-z
Marc