Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

Gelöschtes Mitglied 63549 · 27.07.2009

Ich bin gerade dabei eine Babypage für meinen Nachwuchs zu basteln und bin bei meiner Idee darauf gestoßen, dass ich nur mit HTML und CSS wahrscheinlich nicht auskommen werde.

Auf der Startseite sollte folgende Naviagation am Anfang zu sehen sein.
Siehe folgenden Screenshot:

Nun sollte bei einem Mouseover über eines der fünf Bildchen das Bild sich in Farbe einfärben und ganz in den Vordergrund rücken.
Siehe weiteren Screenshot:

Ich würde mich über Tipps freuen, es muss keine Komplettlösung sein.
Auch Tipps zu Tutorials würden mich sehr freuen!

Danke für eure Unterstützung.

LigH · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

Zumindest JavaScript wird wohl noch dazukommen müssen - einerseits für den Hover-Bildaustausch (obwohl das mit hinreichend vielen Klassen oder IMG-ID-Definitionen noch allein in CSS ginge), andererseits für die Umsortierung mehrerer DIVs (wenn ein DIV per z-index in den Vordergrund kommt, müssen die anderen doch wieder je einen Schritt in den Hintergrund).

photonova · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

Also... im Grund kannst du das sogar mit CSS lösen...

Ich gehe davon aus, dass du die Bilder auch hast ;o)

Die speicherst du einmal als s/w und einmal bunt.

Dann würde ich jeweils eine div-Box anlegen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Meine Babyseite</title></head>
<body>
<div class="photobox" id="boxStart">
<a href="index.html">
<img src="bild.jpg" alt="Startseite" title="Photo: Mein Sohn ist ein Sonnenschein" /></a>
<p>Startseite</p>
</div>
<div class="photobox" id="boxMeilensteine">
<a href="meilensteine.html">
<img src="meilensteine.jpg" alt="Meilensteine" title="Photo: Was ist erreicht habe" /></a>
<p>Startseite</p>
</div>
</body>
</html>

Dann die (bunten) Bilder über CSS "verstecken" und per Hover anzeigen lassen.
Die schwarzen lässt du als Hintergrundbild anzeigen.

Wenn das schon mal klappt, dann kannst du die einzelnen Boxen über position:relative; ausrichten

Wenn du jetzt noch Fragne hast, schicke ich dir gerne eine Rechnung *ggg*

LigH · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

@ photonova:

Da fehlt dann aber, dass die Bilder bei onmouseover in den Vordergrund kommen, und bei onmouseout immer noch oben liegen bleiben...

oxygen · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

die einfachste variante ist

deinen bg lassen
dazu die teile - die farbig werden sollen - als farbigen teil mit in den ordner
dann div-container drauf
5 - für die 5 bilder

dazu brauchst du nämlich kein css
da reicht html
für die einblendung - der farbigen bildteile - kannst du dir den js-code auf selfhtml.org kopieren

und - der vorteil - es ist barrierefrei !!

LigH · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

Unter dem Stichwort "z-index" sollte SelfHTML auf jeden Fall was passendes bringen, was die Reihenfolge der Layer angeht.

Ich würde sogar 6 DIVs empfehlen - einer im Hintergrund (kann nötig sein, um die davor richtig zu positionieren - wegen position=static/absolute/relative) mit z-index=0, die 5 DIVs darin sollten dann als Array von Elementen zur Verfügung stehen, dann kann man sie leichter verwalten (die bekommen am Anfang z-index-Werte von 1 bis 5 in der Startreihenfolge) - bei einem onmouseover-Event den z-index dieses DIVs merken, die z-index-Werte all derjenigen anderen im Hintergrund enthaltenen DIVs um 1 verringern, die größer als der gemerkte z-index waren, und dann den z-index dieses DIVs auf 5 setzen.
__

Ich merke gerade, wir sind alle völlig falsch - hier geht es um Flash statt HTML...

cebito · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

@din-wiesel - was ist mit onmouseout? Sollen die dann so (bunt und im Vordergrund) bleiben, bis über das nächste mit der Maus gefahren wird oder wieder grau in den Hintergrund rücken?
Diese Frage ist hier von entscheidender Bedeutung, wenn es darum geht wie das Problem zu lösen ist.

Gelöschtes Mitglied 63549 · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

Also meine Vorstellung.

Seite wird geladen - Bilder alle in S/W.

Dann fahr ich mit der Maus auf einen der 5 Bilder - Bild ändert sich in Farbe um und schiebt sich an die oberste Ebene und sollte dort bleiben bis ich aufs nächste Bild fahre.

Und wegen diesem Ablauf dachte ich an Flash.

cebito · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

din_wiesel schrieb:
Also meine Vorstellung.

Seite wird geladen - Bilder alle in S/W.

Dann fahr ich mit der Maus auf einen der 5 Bilder - Bild ändert sich in Farbe um und schiebt sich an die oberste Ebene und sollte dort bleiben bis ich aufs nächste Bild fahre.

Und wegen diesem Ablauf dachte ich an Flash.

Das hab ich mir gedacht, geht aber auch mit javascript. Ich mach dann mal ein Beispiel. Die andere Variante wäre noch einfacher gewesen, nur per css...

photonova · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

Aus der ersten Anfrage habe ich nicht wirklich herausgelesen, dass das Bild bunt bleiben soll, wenn man es verlässt, aber noch kein anderes überfliegt.

Und eine Lösung mit JavaScript, die barrierefrei sein soll... nachzuvollziehen, aber nicht wirklich mein Stil. Dann könnte man sich jetzt auch streiten, ob 5 Bilder nicht eine Liste ergeben

cebito · 27.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

So, hier mal ein Beispiel - ohne Erklärungen...

HTML:

<html>
<head>
<style type="text/css">
#bildernavi{
width:800px;
height:500px;
margin:0 auto;
position:relative;
background-color:#CCCCCC;
}
#bild1{
position:absolute;
top:110px;
left:450px;
height:137px;
width:140px;
background-image: url(bild1grau.png);
z-index:1;
background-color: #9900CC;
}
#bild2{
position:absolute;
top:220px;
left:350px;
height:137px;
width:140px;
background-image: url(bild2grau.png);
z-index:2;
background-color: #3300FF;
}
#bild3{
position:absolute;
top:100px;
left:250px;
height:137px;
width:140px;
background-image: url(bild3grau.png);
z-index:3;
background-color: #FFFF00;
}
#bild4{
position:absolute;
top:220px;
left:150px;
height:137px;
width:140px;
background-image: url(bild4grau.png);
z-index:4;
background-color: #660000;
}
#bild5{
position:absolute;
top:110px;
left:50px;
height:137px;
width:140px;
background-image: url(bild5grau.png);
z-index:5;
background-color:#33FF00;
}
</style>
<script type="text/javascript">
var orgzustand = new Array();    
    orgzustand[0] = "bild1";
    orgzustand[1] = "bild2";
    orgzustand[2] = "bild3";
    orgzustand[3] = "bild4";
    orgzustand[4] = "bild5";
var grau = new Array();    
    grau[0] = "url(bild1grau.png)";
    grau[1] = "url(bild2grau.png)";
    grau[2] = "url(bild3grau.png)";
    grau[3] = "url(bild4grau.png)";
    grau[4] = "url(bild5grau.png)";
var bunt = new Array();    
    bunt[0] = "url(bild1bunt.png)";
    bunt[1] = "url(bild2bunt.png)";
    bunt[2] = "url(bild3bunt.png)";
    bunt[3] = "url(bild4bunt.png)";
    bunt[4] = "url(bild5bunt.png)";
function bilder(bild,zahl){
for (i=0; i<=4; i++){
document.getElementById(orgzustand[i]).style.backgroundImage = grau[i];
document.getElementById(orgzustand[i]).style.zIndex = i+1;
}
document.getElementById(bild).style.backgroundImage = bunt[zahl];
document.getElementById(bild).style.zIndex = 100;
}
</script>
</head>

<body>
<div id="bildernavi">
  <div id="bild1" onMouseOver="bilder('bild1',0);"></div>
  <div id="bild2" onMouseOver="bilder('bild2',1);"></div>
  <div id="bild3" onMouseOver="bilder('bild3',2);"></div>
  <div id="bild4" onMouseOver="bilder('bild4',3);"></div>
  <div id="bild5" onMouseOver="bilder('bild5',4);"></div>
</div>
</body>
</html>

viel Spaß

mitstreiter · 28.07.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

din_wiesel schrieb:
Also meine Vorstellung.

Seite wird geladen - Bilder alle in S/W.

Dann fahr ich mit der Maus auf einen der 5 Bilder - Bild ändert sich in Farbe um und schiebt sich an die oberste Ebene und sollte dort bleiben bis ich aufs nächste Bild fahre.

Und wegen diesem Ablauf dachte ich an Flash.

alles möglich mit der tweenklasse, hab ich des öfteren schon hier im forum gepostet!

ist sogar sehr einfach umsetzbar!

@oxygen: bei dem projekt kannste auf barierefreiheit verzichten, da es nicht für die masse ist!

Gelöschtes Mitglied 63549 · 11.08.2009

AW: Ich bräuchte Hilfe wie ich folgende Effekte einer Navigation umsetzen könnte

cebito schrieb:
So, hier mal ein Beispiel - ohne Erklärungen...

viel Spaß

Besten Dank für das Beispiel!

Werde mich da jetzt durchkämpfen und das gnaze umsetzten!
Bin leider noch nicht dazugekommen, da der Junior jetzt seit 31.07.2009 auf der Welt ist und es sich viel und ziemlich alles um ihn derzeit dreht!

Danke für die Hilfe!