QUATRIEME TYPE DE BOUTON : LES BOUTONS EN IMAGES PURES

Exemple

Les espèces de dendrobates Tous les articles

CODE SOURCE CSS ET HTML

<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>

Pour tester ce script


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.