webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> porady >> xhtml + html + css

Rollover za pomocą przesunięcia tła

autor: Paweł 'lisek' Lis, ostatnia modyfikacja: 2007-11-15

szukaj: rollover css rollover css tło tło menu menu

Co to jest rollover?

Efekt jaki widać po “najechaniu” myszki na dowolny element nazywa się rollover. Zwykle jest on obecny w linkach. Po wskazaniu myszką link zmienia kolor, czcionkę, pojawia się lub znika podkreślenie itp. Rollover dotyczy nie tylko zmiany wyglądu tekstu, ale także podmiany obrazków, oraz większości wydarzeń spowodowanych wskazaniem myszką dowolnego elementu (wyświetlanie okienka informacyjnego itp. to nie rollover). Za pomocą CSS można uzyskać efekt rollover zapisując oba obrazki w jednym pliku.

Stworzenie menu

Proste menu stworzymy za pomocą elementu <a> umieszczonych w divie:

<div id="menu">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
A tutaj będzie zwykły tekst

Za pomocą float:left menu będzie po lewej stronie, a reszta tekstu po prawej.

Kod CSS

W kodzie css znajdzie się wspomniany wyżej float:left;

div#menu {
float:left;
width:120px;
}

Linki zamienimy na elementy blokowe z 2 powodów:

div#menu > a {
display:block;
width:100px;
height:100px;
}

Kiedy mamy już ustawioną szerokość i wysokość, musimy przygotować tło. Musi ono mieć taką samą szerokość i 2 razy większą wysokość. Górna połowa (100px X 100px) będzie tłem linków nie wskazanych myszką, a dolna-wskazanych. Tło zapisujemy jako np. tlo.png, i dopisujemy do CSS adres pliku z tłem, w naszym przykładzie jest to tlo.png, pozycję tła w elemencie, w tym przykładzie 0px 0px, oraz rodzaj powtarzania - no-repeat.

background-image:url(tlo.png);
background-position: 0px 0px;
background-repeat:no-repeat;

Rollover właściwy

Teraz sprawimy, że rollover zacznie działać. We wskazanym elemencie a tło musi się przesunąć o 100 px do góry, tak aby widoczna była dolna połowa pliku tlo.png, a górna wystawała poza element a. Do styli dodajemy element a:hover (hover to element wskazany myszką).

div#menu > a:hover {
background-position: 0px -100px;
}

Zapisujemy plik i otwieramy w przeglądarce. Wyświetlają się trzy linki (w naszym przykładzie), z jakimś tłem. Po wskazaniu kursorem myszy tło przesuwa się do góry.

Pozycja tekstu w linkach

Tekst będzie przytulony do lewej i górnej krawędzi linka. Można go wyśrodkować za pomocą:

text-align:center;

Aby odsunął się od górnej krawędzi można użyć

padding-top:30px;

W IE zadziała prawidłowo - tekst odsunie się od górnej krawędzi o 30px, ale w FF element a powiększy się o wartość paddingu, tzn. będzie miał 130px. Metodą która sprawdzi się we wszystkich przeglądarkach jest umieszczenie tekstu w znacznikach <span>:

<a href="#"><span>Tekst</span></a>

w CSS dopisujemy:

div#menu > a > span {
display:block;
margin-top:30px
}

tekst jest już odsunięty od górnej krawędzi. Zastosowanie display:block; było konieczne, bo tylko elementy blokowe mają marginesy pionowe.

Paweł 'lisek' Lis

Osoby czytające tę publikację przeglądały również:

Oczekujesz profesjonalnej obługi?
Strony www.
Odwiedź naszą stronę!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org