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.


Sursa
2009-02-28 14:09:15



Comenteaza





Ultimele 25 posturi adăugate

17:50:00ZORI DE CARTE NOUĂ —» Leo Butnaru
07:39:05Spumantul-surpriză cu marea medalie de aur —» Fine Wine
18:48:48Fără Titlu —» Путепроводные Заметки
16:37:04Fără Titlu —» Путепроводные Заметки
14:10:40Fără Titlu —» Путепроводные Заметки
11:47:22Spectacol în aer liber la Amfiteatrul din Ciocana in final de stagiune —» Curaj.TV | Media alternativă
08:29:55Cultura Iei: Moștenirea și Simbolistica Costumului Popular —» Biblioteca de Arte 'Tudor Arghezi'
04:32:00POEME PRIN ANI —» Leo Butnaru
20:50:01Fără Titlu —» Путепроводные Заметки
19:21:42Fără Titlu —» Путепроводные Заметки
17:57:00Iulie 2025 – evenimente karmice, violențe, schimbări majore —» codul omega
17:52:41Fără Titlu —» Путепроводные Заметки
15:32:52Fără Titlu —» Путепроводные Заметки
05:01:00DIN YES-EURI —» Leo Butnaru
01:25:15Fără Titlu —» Путепроводные Заметки
19:38:25Fără Titlu —» Путепроводные Заметки
17:35:11Fără Titlu —» Путепроводные Заметки
14:30:58Primarii care i-au ajutat pe romi. Deportarea romilor în Transnistria —» Curaj.TV | Media alternativă
14:11:48Fără Titlu —» Путепроводные Заметки
08:54:11Ștefan Iamandi: mii de surse media au publicat informații de la Congresul OIV din Moldova —» Fine Wine
06:01:00ÎN AȘTEPTARE 4/11 —» Leo Butnaru
05:44:00Amintiri —» Andrei LANGA. Blogul personal
05:44:00Amintiri —» Andrei LANGA. Blogul personal
03:44:24Fără Titlu —» Путепроводные Заметки
01:22:04Fără Titlu —» Путепроводные Заметки