Deoarece am observat că încă sunt destul de multe persoane care nu ştiu să facă un efect de rollover, voi explicat un procedeu simplu, pe care îl folosesc mereu.

Această metodă necesită o singură imagine, deoarece, în cazul folosirii a două imagini, apar mici probleme în Internet Explorer 6 (aşa numiul flicker). Îţi voi arăta cum poţi face acest lucru foarte uşor, doar cu câteva linii de cod. Poţi folosi acest exemplu oriunde; eu prefer această metodă la orice meniu ce conţine imagini.

1) Pregătirea imaginii.

Presupunem că cele două imagini (on/off) sunt următoarele:

Cu ajutorul unui program de grafică (Photoshop, ImageReady, etc.) editează cele două imagini, astfel încât să le uneşti vertical, astfel încât rezultatul să fie următorul:

Desigur, cele două imagini se pot lipi şi pe orizontală, dar vor fi necesare mici ajustări în codul de mai jos.

2) Codul HTML.

Vei folosi sintaxa standard pentru link-uri, atribuind o clasă link-ului „victimă” şi vei pune mai multe link-uri pentru a vedea cum se poate face rapid un meniu.

1
2
3
4

<a href="#" class="rollover">Button</a>
<a href="#" class="rollover">Button</a>
<a href="#" class="rollover">Button</a>
<a href="#" class="rollover">Button</a>

Asta e tot

3) Codul CSS…

Este mai simplu decât îţi imaginezi

1
2
3
4
5
6
7
8
9
10
11
12
13

a.rollover {
	display:block;
	width:120px; /* lăţimea imaginii */
	height:25px; /* înălţimea imaginii */
	line-height:25px; /* pentru alinierea pe verticală a textului */
	background-image:url(images/button.jpg); /* imaginea pentru care vrei rollover */
	background-repeat: no-repeat;
	background-position: left top;
	/* mici stilizări, nimic obligatoriu*/
	text-align:center;
	text-decoration:none;
	margin-bottom:5px;
}

Secretul este, cum probabil ţi-ai dat seama, în background-position. Astfel încât, pentru hover, vei schimba poziţia background-ului astfel:

a.rollover:hover {
 
background-position: left bottom;
 
}

Dacă în locul imaginilor verticale ai folosit imagini lipite orizontal, modificarea necesară este următoarea:

1
2
3

a.rollover:hover {
	background-position: right bottom;
}

Poţi vedea un rezultat rapid AICI. Desigur, nu eşti limitat decât într-un singur fel:

Acest „truc” nu merge decât cu link-uri, deoarece, acelaşi Internet Explorer nu recunoaşte hover la alte elemente decât link-uri ( tagul a ).

Tipurile de imagini sunt STRICT cele pentru web: jpg, png şi gif.

Succes!