- · Niveau : DÉBUTANT
- · Compatibilité : Internet Explorer 4+
La balise A :Hover du CSS détermine la couleur de fond d’un lien (A). Elle n’est pas compatible avec Netscape. Elle le sera peut-être dans la version 5. Mais cet attribut offre tellement de dynamisme à une page que je ne peux m’empêcher de l’utiliser. De toute façon il n’enlève rien aux utilisateurs de Netscape si ce n’est quelques agréments.
La technique est très simple. Vous avez comme toujours une image qui est utilisée comme un bouton que le visiteur clic. Cette image doit avoir des zones transparentes. En définissant avec la balise A :Hover un fond vert par exemple, A :Hover background: Green, toutes les zones de votre bouton transparentes deviendront vertes lorsque le visiteur passera la souris au-dessus du bouton. Cet effet reproduit à la perfection et avec rapidité le RollOver conventionnel. Pour un effet encore plus impressionnant, ajouter un fond à votre page ou à une table comme l’exemple ci-dessous.
Bon, moi j’ai utilisé le blanc car l’effet est aussi utilisé par les liens texte. (Les liens ne sont pas réel...)
Ceci est un exemple avec 6 images transparentes (accueil, tutorats, scripts, le piont, partenaires, contact), une image qui sépare les boutons et un fon utilisé comme fond de table. (vous pouvez télécharger les images avec le bouton droit de la souris).
Script à mettre dans le HEAD du ducument :
<STYLE><!--
A:hover {text-decoration: none; background: white;}
-->
</STYLE>