HTML/CSS : technique des portes coulissantes
En matière de graphisme web, l’effet très recherché est celui du survol de bouton. Celui-ci est souvent réalisé en HTML/CSS pour des raisons évidentes de référencement.
L’utilisation de l’attribut hover en CSS peut poser certains problèmes au niveau du chargement de l’image. La latence peut être de quelques millisecondes mais ceci est suffisant pour provoquer un effet visuel déplaisant. La solution peut résider dans le préchargement des images mais il existe une autre solution, celle des portes coulissantes.
Le principe est assez simple: au lieu de charger deux images, on charge une image que l’on fera coulisser de la gauche vers la droite.
Bouton de base - affiche le vert
Le fichier image source:
fichier image source
Le code HTML Ã mettre dans la partie body:
<body>
<div id=”But1″>
<p style=”padding-left:70px;font-weight:bold”>
Bouton 1
</p>
</div>
</body>
Le code CSS à mettre dans votre fichier.css ou dans la partie CSS de la balise head de votre page:
#But1
{
width:200px;
height:50px;
float:left;
background:url( votre_chemin_vers_les_images/but-coulissant.png ) left top  no-repeat;
}
#But1:hover
{
background:url( votre_chemin_vers_les_images/but-coulissant.png ) right top  no-repeat;
}
Cette technique est très appréciable et est surtout compatible avec la majorité des navigateurs, IE6 compris.
Vous pouvez télécharger les fichiers issus de ce tutoriel: tuto technique des portes coulissantes.
:hover ne fonctionne pas avec d’autres balises que “a” pour IE<=6..
Alors je peux vous conseiller de mettre la balise “a” en display:block, et assigner à ce “a” l’identifiant “But1″.
Vous pourrez ainsi résoudre le problème de compatibilité avec IE6.