La retroil·luminació dels botons de les pàgines web s’organitza normalment mitjançant dues imatges. Quan passeu el cursor del ratolí per sobre de l’element corresponent del document (enllaç o botó), es genera un esdeveniment que, d’acord amb les instruccions escrites en l’idioma CSS, demana al navegador que canviï una imatge per una altra. Quan el cursor del ratolí s’allunya del botó, es produeix la substitució inversa.
Necessari
Coneixements bàsics de llenguatges HTML i CSS
Instruccions
Pas 1
Hi ha diverses opcions per implementar aquest mecanisme de ressaltat. Per a qualsevol d'ells, podeu utilitzar el mateix codi HTML, canviant només la descripció d'estil corresponent. El codi HTML del botó pot tenir aquest aspecte: text al botó Aquí hi ha l'identificador d'aquest element de pàgina (id = "btnA") al qual s'adjuntarà la descripció de l'estil.
Pas 2
Per implementar una de les opcions, heu de preparar dues imatges, una de les quals mostra el botó inactiu i la segona amb llum de fons. S'utilitzaran com a imatge de fons de l'enllaç. Les instruccions CSS d'aquest botó poden tenir aquest aspecte:
a # btnA, a # btnA: visitat {
pantalla: bloc;
amplada: 50 px;
alçada: 20 px;
background: url (btnA.gif) sense repetir;
vora: 0;
}
a # btnA: passeu el cursor {
background: url (btnA_hover.gif) sense repetir;
vora: 0;
}
Aquí, al primer bloc, s’indiquen les dimensions de la imatge que representa el botó (amplada: 50 px; alçada: 20 px;). Cal substituir-los per les dimensions de la imatge. Els noms dels fitxers d'imatge s'han de canviar de la mateixa manera: btnA.
Pas 3
Una alternativa és posar ambdues imatges en una imatge. Pot estar l’un sobre l’altre o bé l’un al costat de l’altre. També s’utilitzarà com a fons per a l’enllaç. Atès que les mides dels botons s'especifiquen a la descripció de l'estil del botó, tot el que no hi càpiga no serà visible. En aquest cas, les instruccions de la descripció CSS haurien de desplaçar-se per sobre del cursor del ratolí per la imatge de fons de manera que l'àrea amb la imatge del botó ressaltat caigui al marc. Per a aquesta opció, el codi del pas anterior s'ha de canviar de la manera següent:
a # btnA, a # btnA: visitat {
pantalla: bloc;
amplada: 50 px;
alçada: 20 px;
background: url (btnA.gif) sense repetir;
vora: 0;
}
a # btnA: passeu el cursor {
fons: url (btnA.gif) sense repetir 21 px;
vora: 0;
}
Això suposa que heu col·locat les imatges unes sobre les altres (ressaltades a la part inferior) i desades-les en un fitxer anomenat btnA.gif. L’alçada dels botons és de 20 px i l’amplada de 50 px; heu de substituir aquests valors pel vostre.
