✔ Rollover bei überlappenden Elementen

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Hallo zusammen!
Ich habe ein Problem mit Rollover-Effekten bezüglich der Navigation.
Diese schaut so aus: http://www.2klang.net/other/navi_ueberlappend.gif

Als mouseOver-Effekt soll sich lediglich die Farbe der Balken und der Schrift ändern.

(Ich habs zur Verdeutlichung rot markiert, wo das Problem ist.)
Da die oberen Balken überlappen, kann ich die Navi nicht einfach slicen und als einzelne Grafiken nebeneinander stellen und jeder eine mouseOver-Grafik zuweisen.

Bisher kam ich nur auf eine Lösung:
Gesamte Navi einmal im Urzustand speichern.
Gesamte Navi für jeden mouseOver-Zustand einzeln abspeichern.
Imagemaps über jeden mouseOver-Bereich. Dann jeder Imagemap für onMouseOver eine Image-Swap-JS zuweisen und für onMouseOut restore.

Mit dieser Lösung bin ich aber gar nicht glücklich.
So muss ich die Navi 6 mal komplett abspeichern, was Performance-mäßig ziemlich ungut ist..


Hat jemand eine Idee wie das besser zu lösen ist?
 
Die Überlappungen sind schon etwas zwickelig, aber vielleicht kannst du ja für jeden Menüeintrag eine Hintergrundgrafik erstellen, die beide Zustände enthält und über die CSS-Eigenschaft background-position vertikal verschoben wird.
 
Du meinst, sie vertikal so weit zu verschieben, dass sie quasi aus dem "sichtbaren Bereich" (in meinem Fall der <div>-Comtainer) rausrutscht?

Dann hab ich aber dennoch das Problem, dass ich erstmal die Navi strukturell in 5 Bereiche (entspr. den 5 Menupunkten) gliedern muss. Diese überlappen aber.
 
Zuletzt bearbeitet:
Hier mal ein simples Beispiel:

Code: 
a:link, a:visited {
display: block;
width: 70px;
height: 35px;
background-image: url([Grafik-URI]);
background-position: 0 0;
}

a:hover {
display: block;
width: 70px;
height: 35px;
background-image: url([Grafik-URI]);
background-position: 0 35px;
}
Die Hintergrundgrafik ist 70 Pixel hoch, sichtbar sind aber nur 35 Pixel. Mit dem :hover-Selektor wird die Hintergrundposition verändert und die untere Grafik-Hälfte "nach oben geschoben".
 
Danke für das Beispiel. Das habe ich soweit schon richtig verstanden.

Aber ich versteh Dich nicht, wie ich das im html-Dokument umsetzen kann.
Denn dort bin ich ja an ein rechteckiges Layout gebunden.
(die roten Striche in der Grafik).
Und dort ist ja nach wie vor eine Überlappung vorhanden.

Ich kann ja nicht einfach 5 div-Container nebeneinander stellen, da ich dann wieder quasi "zweigeteilte" Grafiken habe..
 
Naja, in den einzelnen Grafiken müssten auch die Überschneidungen der benachbarten Menüpunkte enthalten sein, die grün bleiben.

Aber wie ich schon in meinem ersten Posting andeutete, ist die Aufgabenstellung mit den Überlappungen etwas zwickelig ;)
 
Ja, ist echt zwickelig..
Dennoch erstmal danke dass Du Dich bemühst :p

Das Problem ist in meinem Verständnis vor allem:
Wie kann ich die Grafiken richtig zuschneiden? Davon hängt es dann ja auch im html ab.
Ich sehe da zwei Möglichkeiten:
a) Entlang der Balken oben (wie die roten Striche)
b) Von Menupunkt zu Menupunkt bezüglich der Schrift. Also z.B. "news" bis Anfang "losdos".

Bei a) habe ich hinterher das Problem, dass die Links nicht mehr exakt auf den einzelnen Grafiken liegen, ich also wieder mappen muss oder ähnliches.

b) geht wahrscheinlich gar nicht? Da ich ja nicht dem bei aktivem "news" dem "losdos"-Bild sagen kann dass es auch noch teilweise andersfarbig wird.
 
Danke, das sieht auf den ersten Blick vielversprechend aus!
Werd ich mich gleich mal draufstürzen!

Aber um in der Zwischenzeit die Diskussion in eine andere Richtung zu lenken-
Wenn der Prophet nicht zum Berg kommt..
Es gibt 100 andere Möglichkeiten als einen Rollover-Effekt.
Fällt Dir spontan was anderes ein, dass die Navigation nicht allzu statisch wirkt und dennoch die Schrägen bleiben?
 
Wenn ich mich nicht täusche, demonstriert Stu Nicholls ein CSS-Menü mit Schrägen. Dummerweise ist die Seite heute schon seit Stunden nicht erreichbar :(
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück