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>

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