»Liens hypertextes
Le roll over
On appelle roll over, le remplacement d'un texte ou d'une image, par un autre texte ou une autre image au survole de la souris. En général cette fioriture de présentation préoccupe assez longtemps les néophytes, et les amène souvent à écrire (ou à pomper) des javaScripts qui n'en finissent plus et qui utilisent des images encapsulant du texte ce qui est relativement lourd et vide de sens pour les moteurs de recherche ... Flash peut répondre à se genre de besoin de manière plus légère, mais il est, au même titre qu'une image, vide de sens .Ce n'est pas la bonne méthode quand on veut être bien référencé par les moteurs de recherche. Nous allons voir qu'avec 3 déclarations css, contenant chacune une ou deux règles nous allons arriver à nos fins avec élégance et décontraction ;-)
Les pseudo-formats
On pourrait considérer les pseudo-formats comme une extension des sélecteurs. Cette extension exprime l'état du sélecteur. Nous avons vu qu'il était facile via css de réécrire la présentation par défaut (bleu souligné) des liens hypertexte dans une page web
a{
color: white;
text-decoration: none;
}
Tous les liens s'afficheront en blanc non souligné. Notez qu'avec une telle déclaration je perds un aspect important de l'affichage des liens. Dans la présentation par défaut un lien déjà visité était affiché en violet, ce qui signale à l'internaute que la page qui se trouve derrière ce lien a déjà était vue. Or avec la déclaration CSS précédente tous les liens s'affichent en blanc non souligné qu'ils soient parcourus ou non. Il faudrait donc un moyen d'exprimer dans un sélecteur CSS "liens visité" pour pouvoir leur définir un format d'affichage différent des "liens non visités". Ces précisément le rôles des pseudo formats. Les pseudo formats décrivent 5 états applicable principalement aux liens, mais aussi à d'autres entités comme les formulaires par exemple:
- :link - les liens de la page non encore visités
- :visited - les liens de la page déjà visité
- :hover - lien survolé par la souris de l'utilisateur
- :active - lien cliqué par la souris de l'utilisateur
- :focus - lien "présélectionné" au clavier via la touche tabulation
Ainsi une déclaration CSS de la forme
a:link{
color: white;
text-decoration: none;
}
a:visited{
color: purple;
text-decoration: none;
}
Permettra à l'internaute de distinguer les liens parcouru des liens à parcourir
Roll Over CSS
C'est en jouant avec le pseudo format que nous allons pouvoir obtenir un roll over sans une seule ligne de javaScript. Une décalartion CSS de la forme:
a:link{
color: white;
text-decoration: none;
}
a:hover{
background: white;
color: gray;
border: 1px solid red;
}
a:visited{
color: purple;
text-decoration: none;
}
Donnera le rendu suivant
Un lien sensible au passage de la souris
Combinez cette petite astuce avec l'astuce du gradient présenté un peu plus loin ... Enjoy
