Mouseover-Button-Set (Rollover) oval mit Beispiel-Navigation & anpassbarer Grafik im Tiff-Format

Der Hintergrund der Buttons ist transparent!

Übrigens: Die im Download-Paket enthaltene Grafik im Tiff-Format "alle-ebenen-und-effekte.tif" ist in einzelne Ebenen abgespeichert, sodass ein zukünftiger Zugriff auf diese jeweils möglich sind; Bei Bedarf können in dieser Datei Änderungen vorgenommen werden, sofern notwendig und sofern Sie über ein Bildbearbeitungs-Programm verfügen, welches das Tiff-Format unterstützt!

Die nachfolgenden vier Grafiken wurden benötigt, um ein solches Menue (siehe links) zu kreieren. Fahren Sie doch einmal mit Ihrer Maus über die Beispiel-Navigation!
Das Menue ist unbegrenzt erweiterbar, indem zusätzliche Verweise über das Html-Dokument notiert werden können.

Größe: pro Button 181 x 51px

Button gold oben Button gold unten
Button silber oben Button silber unten

Anweisungen im HTML-Dokument:

<div class="navi">
<a href="#">Home</a>
<span><a href="#">Link 1</a></span>
<a href="#">Link 2</a>
<span><a href="#">Link 3</a></span>
<a href="#">Link 4</a>
<span><a href="#">Link 5</a></span>
</div>

Anweisungen in der CSS-Datei:

.navi a:link      
{ 
display: block;
width: 181px;
text-decoration: none;
font: normal 16px/51px Tahoma, Arial, Verdana;
color: #000;
text-align: center;
background: url('../images/gold-oben.png') no-repeat; 
}

.navi a:hover       
{ 
color: #fff;
background: url('../images/silver-oben.png') no-repeat; 
}

.navi span a:link   
{ 
background: url('../images/gold-unten.png') no-repeat; 
}

.navi span a:hover 
{ 
color: #fff;
background: url('../images/silver-unten.png') no-repeat;
}


Eine kostenlose Nutzung der Grafiken dieser Seite ist nur mit Backlink (siehe unter Link zu uns) gestattet! Mit dem Download der Grafiken akzeptieren Sie die Nutzungsbedingungen von homepage-vorlagen-webdesign.de

 Download

Das könnte Sie vielleicht auch interessieren:

[ Ebenenbearbeitung von Psd- und Tiff-Dateien ]
[ Ebeneneffekte mitskalieren ]




Copyright by homepage-vorlagen-webdesign.de | Impressum | Disclaimer | Nutzungsbedingungen |

zurück