Manchmal möchte man aus rein optischen Erwägungen auf seiner Seite eine aus Grafiken bestende Navigation haben. Das bedeutet im Normalfall viel Arbeit. Man muss die ganzen Einzelgrafiken zurechtscheiden (und jeweils Mouseover-Versionen), sich dann den Kopf darüber zerbrechen wie man den Mouseover-Effekt realisiert (Javascript? Kann man abschalten. CSS-Pseudoklasse :hover? Geht beim IE auf img-Elementen nicht...) und am Ende muss man sich dann auch noch darum bemühen, dass der Mouseovereffekt ohne Verzögerung beim Nachladen der entsprechenden Grafik kommt.

Weniger ist mehr

Die Lösung all dieser Probleme besteht darin, die entsprechenden Schritte beim Bau einer Bildernavigation einfach nicht auszuführen. Nehmen wir erst einmal eine ganz einfache HTML-Navigation her:

<ul id="navi">
    <li><a href="/">Startseite</a></li>
    <li><a href="projekte.html">Projekte</a></li>
    <li><a href="referenzen.html">Referenzen</a></li>
    <li><a href="impressum.html">Impressum</a></li>
</ul>
Das Navibild
Dies Bildnis ist bezaubernd schön... bzw. hässlich. Macht aber nichts, es ist ja nur ein Beispiel.

Passend dazu basteln wir uns dann die grafischen Repräsentationen der Navigationspunkte (inkl. Varianten für den Mouseover-Effekt), lassen sie aber, statt sie wie gewohnt in Einzelbilder zu zerlegen, in einem Stück.

Dieses Bild wird in Folge nicht mehr angerührt - ab jetzt brauchen wir nur noch css und ein paar kleinere Änderungen an der HTML-Datei. Der Plan sieht wie folgt aus:

  1. Die Navigationspunkte (Der Text zwischen den a-Tags) werden mit einem Image-Replace-Trick durch das große Navigationsbild ersetzt.
  2. Durch individuelles CSS-Styling wird das Navigationsbild für jeden Punkt so positioniert, dass es aussieht als wäre dort jeweils ein Einzelbild am Werke.
  3. Weil das ganze in a-Tags stattfindet, ist es kein Problem mit der :hover-Pseudoklasse den Mouseovereffekt zu erstellen. Es wird einfach das Navigationsbild für a:hover so verschoben, dass statt der normalen Grafik die Mouseover-Version zu sehen ist.

Schritt 1

Image-Replace-Trick bedeutet in diesem Fall, dass die a-Tags zu Block-Elementen werden, ein Hintergrundbild bekommen - und dass der Text zwischen den a-Tags verschwindet. Wir setzen ihn einfach in einen Span und stylen diesen unsichtbar. CSS-Fähige Browser werden ihn nicht anzeigen, aber für Suchmaschinen, Screenreader und Textbrowser ist der Text immer noch da. Der Code für diesen Schritt:

<ul id="navi">
    <li><a href="/"><span>Startseite</span></a></li>
    <li><a href="projekte.html"><span>Projekte</span></a></li>
    <li><a href="referenzen.html"><span>Referenzen</span></a></li>
    <li><a href="impressum.html"><span>Impressum</span></a></li>
</ul>

CSS macht aus den Links Block-Elemente und verpasst ihnen unser Navibild als Hintergrund.

#navi {
  list-style-type:none;
  margin:0;
  padding:0;
}

#navi li a {
  display:block;
  width:160px;
  height:32px;
  background:white url(navi.jpg) no-repeat top left;
}

#navi li a span {
  display:none;
}

Jetzt sieht die Navigation schon richtig nach etwas aus, allein die richtige Positionierung des Hintergrundbildes für die einzelnen Punkte fehlt noch.

Schritt 2 und 3

Mit CSS und background-position kein ist die Positionierung des Hintergrunds kein Problem; und um Zeit zu sparen, legen wir das ganze gleich so an, dass die Position beim Mouseover eine andere ist. Weil das ganze ja nur Hintergrundbilder eines a-Tags sind, brauchen wir dafür nicht mehr als die :hover-Pseudoklasse. Um die einzelnen Links in den Navigationspunkte zu identifizieren, verpassen wir den Listenpunkten noch IDs. Jetzt schaut das ganze so aus:

<ul id="navi">
    <li id="navi-start" ><a href="/"><span>Startseite</span></a></li>
    <li id="navi-projekte"><a href="projekte.html"><span>Projekte</span></a></li>
    <li id="navi-referenzen"><a href="referenzen.html"><span>Referenzen</span></a></li>
    <li id="navi-impressum"><a href="impressum.html"><span>Impressum</span></a></li>
</ul>

Das CSS mit all den Zahlen ist dann doch etwas mühsam (Beziehungsweise es wird schnell mühsam wenn die Navigationsliste lang wird), aber schneller als sich im Grafikprogramm einen Wolf zu schnibbeln ist's allemal. Letztendlich ist es ja nur einfachstes Rechnen.

#navi-start a:link, #navi-start a:visited, #navi-start a:active {
    background-position:0px 0px;
}
#navi-start a:hover {
    background-position:0px -128px;
}

#navi-projekte a:link, #navi-projekte a:visited, #navi-projekte a:active {
    background-position:0px -32px;
}
#navi-projekte a:hover {
    background-position:0px -160px;
}

#navi-referenzen a:link, #navi-referenzen a:visited, #navi-referenzen a:active {
    background-position:0px -64px;
}
#navi-referenzen a:hover {
    background-position:0px -192px;
}

#navi-impressum a:link, #navi-impressum a:visited, #navi-impressum a:active {
    background-position:0px -96px;
}
#navi-impressum a:hover {
    background-position:0px -224px;
}

Uns schon ist unsere Navigation fertig. Kein Javascript, keine großen IE-Probleme, keine Nachladezeit-Probleme. Die optimale Lösung wenn's denn mal Bilder sein müssen.

Nachtrag vom 26. August 2007

Die Methode, die hier zum Verstecken des Textes der Navigationspunkte verwendet wird, hat den Nachteil, dass die versteckten Elemente von Screenreadern nicht erfasst werden. Wie man es besser besser macht ist im Artikel über Image Replacement beschrieben.