Listen-navigation mit Hintergrundbildern realisieren

[[email protected]]

Hallo zusammen
Ich muss für eine Site eine Navigation machen, welche aus einer Liste besteht. jeder Navigationspunkt soll hinter dem Namen ein Button haben, welcher ausgetauscht werden soll bei mouse over. ausserdem soll die gerade aktive Seite einen anderen Button haben.
Die "Normalfall" und mit mouse-over habe ich bis jetzt wie folgt gelöst:

<li class="navigation" onclick="window.location.href='index.htm';" style="cursor:pointer">Home</li></a>
<li class="navigation" onclick="window.location.href='news.htm';" style="cursor:pointer">News</li></a>

(Dies habe ich so gemacht, damit nicht nur der Text sondern der ganze Button als Link fungiert.)

und in der CSS Datei habe ich einen Block in der grösse des Buttons gemacht, und den Button als Hintergrundbild eingefügt.
Bei der mouseover-variante funktioniert das auch noch ganz gut, da habe ich einfach in der CSS eine neue Klasse mit :hover erstellt.

Doch mein Probolem: wie mache ich, dass die aktuell besuchte Seite auch einen anderen Button hat?

Ich danke für schnelle Lösungsvorschläge

 

[Lenchen]

Du kannst in css verchiedene Designs für links festlegen.
Es gibt hover (mouseover) und active (aktiver link) dafür brauchst du kein javascript

 

[[email protected]]

ja, aber in dem Fall wird dann nur der Text verlinkt, aber eigentlich sollte der ganze Button als Link fungieren. sprich eine Box von 170x35 pixeln, und nicht nur der Text.

 

[Körnerbrötchen]

Hau den JS raus:

li a {
 display:block;
 width:Xpx;
 background:url(img/bild.png);
}

li a:hover {
 background:url(img/hover.png);
}

 

[[email protected]]

vielen dank für diesen Hinweis. Das JS habe ich jetzt ersetzt.
Jedoch besteht mein Problem immer noch. Wenn ich zum Beispiel auf die Seite "Kontakt" klicke in der Navigation, sollte auf der geladenen Seite dann ein anderer Button bei "Kontakt" stehen.
Ich habe es schon mit :active versucht, aber dies ist nur die Zeitspanne, in der der Link gedrückt wird...

Ich hoffe ihr versteht mein Problem

 

[Bleistift]

Vielleicht kannst du das mit PHP machen:

<?php
if($_SERVER['PHP_SELF'] == "/kontakt.php") {
    //Quelltext für den Aktiv-Button ausgeben  
} else {
    //Normalen Quelltext ausgeben
}
?>

Wieso schließt du hinter dem <li...></li> eigentlich noch einen Link ("</a>")?
mfg Bleistift

 

[prm]

"active" ist der Linkzustand in dem Moment, wo man mit der maus auf den Link klickt.
Um den Link der jeweils geöffneten Seite hervorzuheben, gehe am besten nach dieser Methode vor: Link der geöffneten Seite hervorheben
Das Ganze funktioniert natürlich auch mit einer entsprechenden Hintergrundgrafik.

 

[Bleistift]

Das geht aber nur bei einzelnen .html Dateien wo in jeder die Navi drin ist(dann ist es so vielleicht auch besser). Wenn z.B. die Navi mit PHP includet wird geht das so nicht.
mfg Bleistift

 

[prm]

Es geht auch, wenn die Navi mit PHP includet wird. Hierzu findest du ziemlich unten in der genannten Anleitung einen weiterführenden Link
Ich sollte aber diese Ergänzung auch noch direkt in die Anleitung schreiben.

 

[Efchen]

ja, aber in dem Fall wird dann nur der Text verlinkt, aber eigentlich sollte der ganze Button als Link fungieren. sprich eine Box von 170x35 pixeln, und nicht nur der Text.

Mach aus dem Link ein Block-Element und ziehe ihn auf die entsprechende Größe.

a {
  display:block;
  width:170px;
  height:35px;
}

 

[Körnerbrötchen]

Das habe ich oben schon gepostet, Efchen... ;)

 

[Efchen]

Hab ich übersehen, ich hab nur "Hau den JS raus" gelesen.