Rollover za pomocą przesunięcia tła

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

szukaj: rollover css tło 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:

tylko elementy blokowe mają właściwości width i height (szerokość i wysokość)
linki mają być jeden pod drugim a nie obok siebie

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

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

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

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!