Image Replace bei :active

[Xer0]

Hi,

ich habe eine Navigation die wie folgt aussieht (Codeausschnitt):

<a href="?load=1"><div class="button-home_"></div></a>

der dazugehörige CSS Code:

.button-home_ {
	position:absolute;
	left:20px;
	top:91px;
	width:153px;
	height:19px;
	background-image:url(images/button_home.gif);
}

.button-home_:hover {
	background-image:url(images/button_home_hover.gif);
}

Der hover Effekt funktioniert, nur möchte ich, dass das bild button_home_hover.gif auch angezeigt wird, wenn der Link gerade aktiv ist!
Habe schon einiges ausprobiert, aber habs nicht hinbekommen.

Jemand eine Idee?

[PHP-Desaster]

Re: Image Replace bei :active

...gerade aktiv ist!...

Was ist mit :active ??

[TobiaZ]

na, :active hast du schon genannt.

Nur, dass du vermutlich was ganz anderes meinst, nämlich dass der User gerade auf der Seite ist.

Das ließe sich nur über JavaScript steuern (vergleiche jeden Link mit der location) oder aber - was üblicher ist - Serverseitig (oder hardcoded) eine Klasse current zuweisen.

[Xer0]

gäbe es denn eine möglichkeit das ganze umzuschreiben?
momentan steht da ja

.button-home_:hover

wenn man den code aber so umschreibt, dass

.button-home_ a:hover

funktioniert, wäre es ganz einfach ein :hover dahinter zu hängen.

nur wie schreibt man das um?

[TobiaZ]

1. Häää?
2. Was hat das mit dem Problem zu tun?

[Xer0]

genau das ist ja das problem ^^
momentan ist der hover effekt nicht mit dem link verknüpft, sondern mit dem <div>!
wäre er aber mit dem link verknüpft, könnte ich einfach :active benutzen.
nur ich habe es nicht hinbekommen das mit dem link zur verknüpfen!

weiß nicht genau wie ich das ausdrücken soll :x

[ArSeN]

Dann gib doch dem link einfach die klasse .button-home_

Mit deinem :active problem hat das aber trotzdem nichts zu tun, das das ist wie schon gesagt auch etwas anderes als das der Benuzter derzeit auf der Seite ist.

[TobiaZ]

Dann gib doch dem link einfach die klasse .button-home_

Wozu?

a:active .button-home_

[Xer0]

<a href="?load=4" class="button-home_"></a>

habe ich jetzt im Menü stehen.
Dem CSS Code habe ich das hier hinzugefügt:

.button-home_:active {
	background-image:url(images/button_home_hover.gif);
}

hover funktioniert noch, aber :active nicht!
kann sein, dass ich gerade irgendwas total verpeile... bin nicht sehr bewandert in CSS :/

Edit:

a:active .button-home_ {
	background-image:url(images/button_home_hover.gif);
}

funktioniert auch nicht!

[TobiaZ]

Zeig mal ne Online-Version.

Und wozu diese überflüssigen Unterstriche?

[Xer0]

die unterstriche hat Photoshop beim Slicen eingebaut ^^
Online Version:

http://www.matthias-henning.de/render04/
CSS: http://www.matthias-henning.de/render04/style.css

habe das ganze bis jetzt nur am Imprint und Home button getestet!

[ArSeN]

Wozu?

a:active .button-home_

Hä, ich denke der Effekt soll sich nur auf den Link beziehen, und nicht auf ein Element innerhalb vom Link ôO

[TobiaZ]

Online Version:

Bei mir funktionierts!
Sicher dass du nicht doch die gerade besuchte Seite meinst?

Hä, ich denke der Effekt soll sich nur auf den Link beziehen, und nicht auf ein Element innerhalb vom Link ôO

Wenn dem so sein sollte, dann frage ich mich, warum das selbe bild sich beim Hover auf das div beziehen sollte. Nur so.

OffTopic:

---

BTW: Schalt mal Bilder im Browser aus! Ambesten nachdem die seite geladen wurde, über developer-toolbar -> images -> disable. Der Effekt ist super!

---

[Xer0]

Original geschrieben von TobiaZ
Bei mir funktionierts!
Sicher dass du nicht doch die gerade besuchte Seite meinst?

vielleicht drück ich mich wegen meiner unwissenheit unklar aus (sry ):
Ich möchte, dass das Bild, das beim Rollover angezeigt wird, auch angezeigt wird, wenn der jeweilige Button bzw Link gerade aktiv ist!

[ArSeN]

Das sagen wir doch die ganze zeit

Aktiv != Benutzer ist auf der Seite

Aktiv == Benutzer hat den gerade angeklickt und die neue Seite wird angefordert