Data publikacji: 2007-05-18
Autor: Wiklin

Efekt rollover bez używania JavaScript? Tak, drodzy czytelnicy (i czytelniczki :), aby uzyskać efekt rollover, nie potrzebny jest JavaScript, wystarczy CSS. W tym artykule wytłumaczę, jak zrobić efekt rollover w CSS.

Przygotowania

Tak więc należy przygotować plik HTML i jeśli chcemy - zewnętrzny plik CSS (polecam). W pliku HTML nawiązujemy do zewnętrzenego arkusza CSS i przygotowujemy link. Ten link będzie naszym polem do zrobienia efektu rollover. Jeśli nie chcemy, aby prowadził do jakiejś strony, wstawiamy # i tyle ;)

Pisanie

Do znacznika <A>, w którym chcemy zrobić efekt rollover, przypisujemy klasę link. Teraz został CSS. Do arkusza wpisujemy:

a.link {
backgroud-image: url (obrazek1.cos);
}
a.link:hover {
backgroud-image: url (obrazek2.cos);
}
No i to wszystko. Możemy testować.