Roll over CSS effect.

Tutoriale

Efekt roll over często wykorzystywany jest do tworzenia efektownych przycisków w nawigacji. Ja chciałem przedstawić jak można sworzyć szybko i łatwo menu do naszej strony.

Obrazki dla przycisków.

Do naszego menu będzizemy potrzebowali odpowiednio przygotowanych przycisków. W obrębie jednego obrazka będziemy mieli stan normalny przycisku jaki stan przycisku po najechaniu go myszką. Oto przykładowy obrazek:

Napis w kolorze granatowym to stan 'normalny' przycisku. Natomiast kolor zielony to stan po najechani na przycisk myszką.

Html naszego menu.

Do menu potrzebujemy odpowiedni kod html. Ja wykorzystam znaczniki div. Każdy znacznik div będzie zawierał link do naszej strony.

<div><a href="#">tu link </a></div>

Style CSS tworzące efekt.

Aby uzyskać efekt dla znaczników div musimy nadać im odpowiednie style css. W pierwszej kolejności nadajmy naszemu tagowi następujący atrybut

id="from_the_runway"

Następnie nadajmy background dla naszego linka znajdującego się w div-ie

#from_the_runway a {
display: block;
background:  url(from_the_runway.gif) top;
width: 156px;
height: 20px;

Powyższy styl css nadaje naszemu linkowi tło - obrazek będzie tłem dla linka. Nadajemy połowę wysokości (20px) dla obrazka, ponieważ chcemy aby tylko granatowy napis się wyświetlał w stanie 'normalnym'.

Aby przycisk zmienił kolor musimy dokończyć style.

#from_the_runway a:hover {
background:  url(from_the_runway.gif) no-repeat bottom;
}

Gotowy efekt.