Rollover - Cum să schimbi o imagine (CSS)

La elaborarea site-urilor de multe ori ne punem în faţă probleme cu navigarea, ce fel de navigare foloseşti cum lucrează, va plăcea clientului / utilizatorului?

Rollover (roll over) din engleză s-ar traduce “a rota peste”, în design acest termen se foloseşte atunci cînd o imagine se schimbă cu alta cînd trecem cursorul peste.

Pentru a implimenta rollover se pot utiliza metode diferite, mai ales în JavaScript, însă dacă utilizatorul nu are activat acest limbah în browser ce se întîmplă? De aceea în ultimii ani rollover a trecut înspre CSS, mult mai operativ, mai eficient şi mai bun

Exemplul I

a.imagerollover1 {
display: block;
width: 200px;
height: 100px;
background-image: url(off.gif);
background-repeat: no-repeat;
}

a.imagerollover1:hover {
background-image: url(on.gif);
}

şi inserăm în documentul nostru .html

<a class=”imagerollover1″ href=”#”></a>

Exemplul II

a.imagerollover2 {
display: block;
width: 200px;
height: 100px;
text-decoration: none;
background: url("onoff.gif");
}

a.imagerollover2:hover {
background-position: -200px 0;
}

şi inserăm în documentul nostru .html

<a class=”imagerollover1″ href=”#”></a>

Exemplele le putem vedea aici.