Exemple
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a.menu1 { /* 1er bouton (dendrobates) */
display:block ; /* Affiche image entière, sans définir
sa taille, et fait un retour à la ligne*/
background-image: url(especes_dendrobates.gif); /* image par défaut
*/
background-repeat: no-repeat;} /* interdit à l'image de se répéter
*/
a.menu1:hover {
background-image: url(especes_dendrobates2.gif)} /* image du survol
*/
a.menu2 { /* second bouton (tous les articles) */
display:block ; /* idem ci-dessus */
background-image: url(tous_les_articles3.jpg); /* idem ci-dessus */
background-repeat: no-repeat;} /* idem ci-dessus */
a.menu2:hover {background-image: url(tous_les_articles4.jpg)} /* idem
ci-dessus */
a img {border-style:none ;} /* supprime la bordure des images avec
liens */
</style>
</head>
<body>
<a class="menu1" href="#"><img src="transparent.gif"
width="246" height="32" alt="Les espèces de
dendrobates"></a> <!-- affichage du 1er bouton -->
<a class="menu2" href="#"><img src="transparent.gif"
width="121" height="20" alt="Tous les articles"></a>
<!-- affichage du 2ième bouton -->
</body>
</html>
COMMENTAIRES
Ce système est analogue aux boutons roll-hover qu'on obtient d'habitude avec du code java-script. Cela offre 3 avantages et 1 petit inconvénient.
Avantage 1 : le code CSS à créer par bouton est plus léger que du code java-scrip. Il se charge plus rapidement.
Avantage 2 : le code CSS étant plus court et plus simple se crée et se maintien plus aisément.
Avantage 3 : ces boutons passent même si le java-script est désactivé, ce qui serait le cas de 10-13% des navigateurs.
Inconvénient : Ces boutons ne passent pas dans Netscape 4 (à peine plus d'1% des usagers).
- PS : Mieux vaux utiliser un roll-hover avec image en le couplant avec un pre-load CSS, et ce pour des raisons de rapidité d'affichage.
Téléchargez especes_dendrobates.gif | especes_dendrobates2.gif | tous_les_articles3.jpg | tous_les_articles4.jpg | transparent.gif
NB : On note qu'une image "transparent.gif" a été définie, avec un texte alt. Cela permet d'afficher un texte alternatif si les images ne peuvent se charger. L'image transparente ne se chargera pas non plus, mais son texte alt sera alors affiché, permettant à l'usager de repérer le bouton et son usage.
On note aussi que l'image transparente a reçue la taille des images constituant les boutons, afin de ne pas gêner l'affichage.