Efekt rollover (CSS) Drukuj
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
wtorek, 22 września 2009 19:10

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ść.