Beispiel-Rollover-Navigation Menue horizontal

Mit Bildertausch: die Buttons werden beim Überfahren mit der Maus ausgetauscht ( ohne JavaScript nur mit CSS )!

Das Menue konnte mit den beiden nachfolgenden Buttons umgesetzt werden:

Um die beiden Buttons herunterzuladen, navigiere mit der Maus jeweils über diese und wähle mit der rechten Maustaste im Kontextmenü den Befehl "Grafik speichern unter ..."!
Weiter unten über den Download-Link wirst Du auf die Seite geleitet, über welche Du die Buttons auch in weiteren Farben herunterladen kannst.

Link 1 Link 2 Link 3

Anweisung im Html-Dokument

 <div class="navi">
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
 </div>

Anweisung im CSS-Style

.navi a:link, .navi a:active, .navi a:visited       
{ 
background: url('images/button.gif');
font: bold 12px/32px Verdana, Arial, Tahoma;
display: inline-block;
width: 132px;
height: 65px;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
color: #fff;
}
.navi a:hover       
{ 
background: url('images/button-rollover.gif');
color: #66CCFF;
}

Hinweis: Ggf. ist noch für die URL ( = Webadresse der Grafik ) der entsprechende Pfad zu notieren - bei Bedarf siehe über folgende externe Seite!

zum Download