✔ Buttons & background-image bei a.active

[Microhome]

Hallo liebe Community,
folgende CSS-Datei habe ich:

a:link { background: none; }
a:visited { background: none; }
a:hover { background:url(./images/over.gif); }
a:active { background:url(./images/over.gif); }

Hier am Bild verdeutlicht:

So sieht es aus, wenn ich mit der Maus über einen der drei Button hovere.
Nun möchte ich folgendes:

Beim Klick auf was soll sich die Seite "index.html" öffnen und der Button was soll von diesem "ober-unterstrich" umgeben sein.
Beim Klick auf wer soll sich die Seite "wer.html" öffnen und der Button wer soll von diesem "ober-unterstrich" umgeben sein.
Beim Klick auf wo soll sich die Seite "wo.html" öffnen und der Button wo soll von diesem "ober-unterstrich" umgeben sein.

Bei einem Hover über einen anderen Button soll jedoch der "ober-unterstrich" weg gehen und dann auf dem gehooverten sein.


Ich weiß es ist schwer erklärt, aber vielleicht versteht ja jemand mein Anliegen.
Wenn nicht, dann einfach nochmal nachfragen!

Ich orientiere mich dabei an folgender Seite
byteshift.de

Dort ist es genau so gemacht und genau das möchte ich auch erreichen. Die Frage ist nun, ob das einzig und allein via CSS möglich ist!?

 

[Budman]

Nein, CSS alleine kann das im Moment noch nicht. Der Status "active" ist, nicht wie oft falsch angenommen, der Zustand, wenn die Maus gedrückt wird. Nicht die aktuelle Seite an sich.

Insofern musst Du da mit javascript dran, um, wie bei bytesoft, die Klasse des Links während man sich auf der jeweiligen Seite befindet zu ändern. Dort ist es so, sobald Du auf einer Seite bist, wird der jeweilige Link der Klasse "active-page" zugeordnet. Dadurch steuern die dieses Image.

Gruss

 

[Microhome]

Alles klar, dank dir.
Dann werd ich mal gucken, ob ich bei google dazu etwas finde. Müsste ja dann so sein, dass bei verschiedenen Seiten dann das entsprechende JS eingebunden wird!?

Habt ihr vielleicht Ideen oder Code dazu?

 

[hela]

Hallo Microhome,

die Über- und Unterstriche kannst du in CSS ganz leicht mit Rahmen machen, dazu brauchst du keine Grafik.
Zum Beispiel könntest du das a-Element als Block definieren und ihm dann einen Rahmen zuweisen, der oben/unten 2px breit ist und links/rechts die Breite 0 hat. Damit dieser Rahmen im Normalzustand nicht sichtbar ist, kannst du ihm die Hintergrundfarbe geben. In der Pseudoklasse "hover" weist du diesem Rahmen nur noch die Schriftfarbe zu.

Den Namen der aktiven bzw. aktuellen Seite fügst du in das Menü als p-Element ein und markierst es am besten durch Inversion, also durch Vertauschen der Hintergrund- und Schriftfarbe. Das liegt zwar nicht in deiner ursprünglichen Absicht, sichert aber erst mal die unverkennbare Markierung der aktiven Seite bei deaktiviertem JavaScript. Anschließend kannst du für das p-Element zwei Klassen definieren, die ihm das gleiche Aussehen wie den a-Elementen im Menü verleihen. Zum Beispiel Klasse "aktiv1" mit Ober- und Unterstrich und Klasse "aktiv2" ohne Ober- und Unterstrich.
Jetzt musst du dir nur noch zwei JavaScript-Funktionen schreiben, die dem p-Element im Menü über die Event-Handler "onLoad", "onMouseOver" bzw. "onMouseOut" eine entsprechende Klasse zuweisen.