erweitertes Bildwechsel/Bildtausch script gesucht

[Matthias Apsel]

Om nah hoo pez nyeetz, lucxx!

hier mal ein HTML/CSS-Vorschlag

<ul id="nav">  
  <li><a href="Seite1.html">Seite 1</a></li>  
  <li><a href="Seite2.html">Seite 2</a></li>  
  <li>Seite3</li> <!-- aktuelle Seite -->  
  <li><a href="Seite4.html">Seite 4</a></li>  
</ul>

#nav li, #nav a {background-image: url('Spritegrafik');  
                 background-position: ...;}  
  
#nav li {background-position: ... }  
  
#nav a:hover {background-position: ...} 

Erläuterungen zum CSS:

Zeile 1: alle li- und a-Elemente bekommen dieselbe Spritegrafik als Hintergrund, die so positioniert wird, dass sie den gewünschten Ausschnitt zeigt.

Zeile 3: die Spritegrafiken für die li werden so verschoben, dass der gewünschte Ausschnitt für die aktive Seite gezeigt wird.

Zeile 4: dito für gehoverte Links.

Dies funktioniert solange, wie du keine teiltransparenten Grafiken verwenden möchtest, da die Hintergrundgrafiken von li und a übereinanderliegen. Sind deine Grafiken teiltransparent, könntest du für die aktive Seite

<li><span>Seite 3</span></li>  

schreiben und entsprechend im CSS

#nav a, #nav span {background-image: url('Spritegrafik');  
                   background-position: ...;}  
  
#nav span {background-position: ... }  
  
#nav a:hover {background-position: ...} 

Matthias