Efekt rollover w CSS

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-22

szukaj: efekt rollover css

Na nowoczesnych stronach znaleźć można wiele elementów dynamicznych. Jednak na dobrych stronach efekty te nie wykluczają elastyczności.

Znany powszechnie efekt rollover, o ile doskonale spełnia pierwszą rolę - wprowadza elementy "interakcji" z internautą - o tyle, nie nie spełnia drugiego kryterium... Nie pozwala na elastyczność kodu, gdyż kod JS jest zagnieżdżony na stałe w kodzie XHTML. A więc pozbycie się tego efektu wymaga ingerencji w kod. A to nie dobrze.

Postarajmy się więc po raz kolejny wykorzystać CSS do pozbycia się problemu. Na początek kod (X)HTML:

<a href="strona.htm">link</a>

Jak widzimy jest to całkowicie normalny kod, bez żadnych dodatków JS. Całość dzieje się w osobnym pliku CSS:

a {
padding-left: 25px;
background: transparent url(1.gif) 0 50% no-repeat;
}
a:hover {
background: transparent url(2.gif) 0 50% no-repeat;
}

Dzięki czemu osiągamy ten sam efekt, co przy użyciu JS. Jednak rozmiar pliku (x)html jest nieco mniejszy, a cała witryna zyskuje większą elastyczność.

Patryk 'yarpo' Jar

szukaj: efekt rollover css css

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

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!