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

05:59:16JURNALUL DE LA HYPERION (VI) —» Leo Butnaru
07:34:02Trei noutăți de la Crama Mircești —» Fine Wine
06:03:20ÎN PREAJMA UNEI CĂRȚI NOI —» Leo Butnaru
09:44:08Rusia în anii 90…pregătindu-l pe Putin…(reflecții pe marginea unui film). —» blog cultural
05:15:16DIN POEZIA FRANCEZĂ CONTEMPORANĂ —» Leo Butnaru
05:11:09JURNALUL DE LA HYPERION —» Leo Butnaru
06:34:16O MARE POETĂ DIN FINLANDA —» Leo Butnaru
16:08:35PORȚI / PUERTAS —» Andrei LANGA. Blogul personal
04:19:45Atenție la semne! 9 mai ne-a dezvăluit cam cum va arăta „concursul” de ocupare a funcției de președinte al RM —» Nicolae Federiuc
19:13:15Hyde Park împlinește 21 de ani —» Curaj.TV | Media alternativă
18:47:41UN ALTFEL DE RĂZBOI —» Andrei LANGA. Blogul personal
22:49:14Nemo —» APort | "Pentru un român care știe citi, cel mai greu lucru e să nu scrie." I.L. Carag
19:53:38Drapele vandalizate pe clădirea unui minister —» Curaj.TV | Media alternativă
19:46:01Comemorare Mihai Creangă la Memorialul Sighet —» Curaj.TV | Media alternativă
17:40:39FLASH (trad. al español) —» Andrei LANGA. Blogul personal
12:46:32UN ALTFEL DE RĂZBOI —» Andrei LANGA. Blogul personal
11:18:14Cântărețul Ștefan Petrache ar fi împlinit 75 ani —» CHIŞINĂU MUZICAL | Blogul Bibliotecii de Arte "Tudor Arghezi"
08:09:45#NoSugarPolitics: Mobilizarea si drepturile omului, rezolutia PE, investigatie Italia —» Curaj.TV | Media alternativă
01:16:40from the director of the boondock saints —» turn up the silence
13:23:16RETRATOS VOLADORES* (Portrete plutitoare, trad. al castellano) —» Andrei LANGA. Blogul personal
11:37:20Era politicienilor pitici. Când un ditamai șef de stat e mult mai mărunt decât un blogger —» Nicolae Federiuc
19:27:00Poliția locală din sect. 2 ignoră prevederile legale —» Curaj.TV | Media alternativă
15:50:52Poliția locală ignoră vandalii de la kilometrul zero —» Curaj.TV | Media alternativă
13:18:37„Legată cu funia de pământ” de Lorina Bălteanu (Pledoarie pentru lectură) —» BiblioCity
04:48:40Monumentul reginei e inundat cu un proiect sofisticat —» Curaj.TV | Media alternativă