Normalment, les fletxes gràfiques dels llocs web s’utilitzen per organitzar la navegació. Quan feu clic a aquest punter, aneu a una altra pàgina o a una altra secció de la pàgina actual. De vegades hi ha algunes accions lligades a elles: ressaltar el contingut del camp de l’etiqueta, llançar un script JavaScript, etc. Per emfatitzar que aquesta fletxa és un element actiu, utilitzeu l'efecte "ressaltar", és a dir, canvis d'aspecte en passar el ratolí.
Necessari
Coneixements bàsics de llenguatges HTML i CSS
Instruccions
Pas 1
Determineu quin és el millor mecanisme per implementar el ressaltat de fletxa. N’hi ha diversos, dos simples es donen en els passos posteriors d’aquesta instrucció. Tots dos utilitzen la pseudo-classe del cursor CSS. Quan el cursor del ratolí es troba sobre un element gràfic (fletxa), se li aplica l'estil descrit en aquesta pseudo-classe i la resta del temps aquest estil no està actiu. Per a les dues opcions que es descriuen a continuació, podeu utilitzar el mateix HTML codi, però descripcions d’estil diferents. El codi de fletxa a l'origen de la pàgina es pot escriure de la següent manera: L'atribut id especifica l'identificador d'enllaç (fletxa A), mitjançant el qual el navegador determinarà quina de les descripcions d'estil se li ha d'aplicar.
Pas 2
La primera opció requereix que prepareu dues imatges de fletxa, amb i sense retroil·luminació. Deseu-los a fitxers amb noms com arrON.
una # fletxaA, una # fletxaA: visitada {
pantalla: bloc;
alçada: 30 px;
amplada: 100 px;
background: url (arrOFF.gif) sense repetir;
vora: 0;
}
a # arrowA: passeu el cursor {
background: url (arrON.gif) sense repetir;
vora: 0;
}
El primer bloc conté les dimensions de la fletxa (alçada: 30 px; amplada: 100 px); substituïu-les per les dimensions de les imatges de fletxa preparades.
Pas 3
La segona opció us permet avançar amb només un fitxer d'imatge. Heu de col·locar-hi les dues imatges de la fletxa, tant ressaltades com inactives. Podeu col·locar-los un al costat de l’altre, els uns sobre els altres. Al codi de mostra, assumirem que la fletxa ressaltada es col·loca a sota de la inactiva i que el fitxer l’anomeneu arr.gif. Aquesta imatge, com a la versió anterior, s’utilitza com a fons per a l’enllaç. Atès que les dimensions de l'objecte s'indiquen a la descripció de l'estil, la resta del fons (fletxa ressaltada) que no hi cabrà no serà visible per al navegant. A la descripció del pseudoestil, es especifica un canvi en el posicionament de la imatge de fons, de manera que quan passeu el cursor per sobre de l'enllaç, es farà visible una altra secció i ara la fletxa passiva apareixerà "fora de pantalla".
una # fletxaA, una # fletxaA: visitada {
pantalla: bloc;
amplada: 100 px;
alçada: 30 px;
background: url (arr.gif) no repetir;
vora: 0;
}
a # arrowA: passeu el cursor {
fons: url (arr.gif) sense repetir 31 px;
vora: 0;
}
No us oblideu de canviar la mida aquí.
