webmaster webmastering webdesign

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

Efekt rollover w CSS

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

szukaj: efekt rollover efekt rollover css 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

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

Chcesz zaoszczędzić czas i pieniądze?
Projektowanie stron internetowych.
Przebijamy konkurencje!

 

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