29483 cazuri COVID-19 în Moldova
8043 – cazuri active
20556 – cazuri vindecate
884 – cazuri fatale
Actualizarea datelor: 15 august 2020 ora 06:27


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

01:15:42Dragoste îți lovește pe toți —» Viata pe Tinder – Viata amoroasa pe Tinder
20:35:52Vaccinul anti-covid: Americanii refuză oferta lui Putin: “Nici în ruptul capului” —» Elena Robu
20:33:34Curățăm malurile iazului de gunoi —» Curaj.TV | Media alternativă
19:38:50Îngeri* —» Andrei LANGA. Blogul personal
19:21:52Cumetra a luat bani pentru casă, dar acum neagă —» Curaj.TV | Media alternativă
18:04:34love —» turn up the silence
15:57:47(VIDEO) Agonia regimului lui Lukașenko —» Elena Robu
14:23:45COVID-19: Noi reguli de intrare în Franța pentru moldoveni —» Elena Robu
11:07:42Vinuri mari de la mici producători —» Fine Wine
08:33:31Copii iubitori de carte sunt și vor fi mereu! —» BiblioCity
08:22:11Rețetă delioasă de Quiche cu legume și cașcaval Brie —» Life is too short to wear boring clothes. - A blog about travel, lifestyle, healthy life and fashio
08:22:11Rețetă delicioasă de Quiche cu legume și cașcaval Brie —» Life is too short to wear boring clothes. - A blog about travel, lifestyle, healthy life and fashio
06:27:25Justiție prin SMS. Varianta Peter Michalko (o istorie din august 2018) —» un alt blog
21:14:58VLOG – CE SE-NTÂMPLĂ ÎN BELARUS (+15) —» Curaj.TV | Media alternativă
20:27:34©️ Știi ce contează în viață? —» Licurici de suflet
20:08:55Geană îi ia cu binişorul pe coşciugarii din Tecuci —» Curaj.TV | Media alternativă
19:56:16Studiu asupra antifoanelor Liturghiei. Variantă de Antifonariu pentru enarxa liturgică —» Liturgică şi Misiologie Ortodoxă
15:17:10Электрический дизельный AUDI Q7 e-tron chiptuning —» Сажевые фильтры (DPF/ FAP). Чип тюнинг. Теория, практика.
14:54:03Aleksandr Lukașenka —» Gheorghe Erizanu
14:47:35Она утонула —» Бессарабские хроники
14:40:50Карантин — не карантин —» Бессарабские хроники
12:00:36Biroul procurorului general a Ucrainei a trimis solicitări Parchetului General al Republicii Belarus pentru extrădarea a 28 de participanți la conflictul armat din Donbas —» ACUM ÎN UCRAINA
11:07:18Puțină teologie în jurul întrebării: „De ce a trecut Găina strada?” —» Curbet Alexandru
11:00:58🔴 Христианское АВТО Радио – слушать онлайн (24/7) —» Curbet Alexandru
10:29:54Acuză condiţii inumane la închisoarea de la Cahul —» Curaj.TV | Media alternativă