Über mich

Startseite arrow Tipps & Tricks arrow Bilder-Navigation ohne Bilder

Bilder-Navigation ohne Bilder
Montag, 28. Juli 2008
Geschrieben von Armin Vieweg
Um eine Navigation mit Bildern umzusetzen gibt es viele Möglichkeiten. Hier beschriebe ich eine sehr suchmaschinenfreundliche, die ohne Images <img> auskommt.

Für Google und Textbrowser sieht die Navigation aus wie eine ungeordnete Liste mit Textlinks. Ideal für Suchmaschinen und für Barrierefreiheit.




<ul>
  <li><a href="link1.html" class="link1">Link 1</a></li>
  <li><a href="link2.html" class="link2">Link 2</a></li>
  <li><a href="link3.html" class="link3">Link 3</a></li>
</ul>



Mit dem folgenden Stylesheet wird der Text innerhalb des Links nicht mehr sichtbar sein. Stattdessen erscheint pro Link ein Bild, dass sich beim Hover-Effekt verändert.


ul li a {
  display:block;
  width:150px;
  height:30px;
  background-repeat:no-repeat;
  text-indent:-900em;
  outline:none;
}

ul li a:hover {
  background-position: -30px 0;
}

.link1 { background-image:url("/images/bild1.gif"); }
.link2 { background-image:url("/images/bild2.gif"); }
.link3 { background-image:url("/images/bild3.gif"); }




Damit das ganze mit dem Hover-Effekt funktioniert müssen die Dateien bild1.gif und Folgende, doppelt so hoch sein. Also in diesem Beispiel 60 Pixel hoch. Die oberen 30 Pixel beinhalten den Zustand des Menüpunktes, wenn er "normal" ist, die unteren 30 Pixel beinhalten den Zustand des Hovers.

Innerhalb der Link-Definitionen können auch individuelle Breiten eingegeben werden, falls die verschiedenen Menüpunkt-Bilder unterschiedlich breit sind.


Ähnliche Artikel

Hover und Background-Images im IE6





  Kommentare (1)
 1 Geschrieben von: Curtis Newton, am 26.03.2009 um 08:52
Mit dem text-indent ist pfiffig. 
Alternativ in der css-Datei ohne den text-indent-Wert arbeiten und statt dessen in der html-Datei in der mit Link 1 arbeiten.
Letzte Aktualisierung ( Donnerstag, 24. Juli 2008 )
 
< Zurück   Weiter >



Tipps & Tricks Kategorien

Beliebteste Tipps