<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à
la fin de chaque bouton */
margin-top:5px ; /* Crée une marge de 5 pixels en haut des boutons
*/
text-align:center; /* centre le texte de chaque bouton */
width:200px ; /* largeur de chaque bouton = 200 pixels */
height: 40px ; /* défini la hauteur des boutons */
border-style:outset ; /* relief sur l'encadrement des boutons */
border-width:3px ; /* épaisseur de l'encadrement des boutons
= 3 px */
padding:2px } /* défini la marge intérieur des boutons
à 2px */
a.menu1:hover {color:black ; /* change couleur de la police lors du
survol souris */
background-color:#0000FF ; /* change couleur du fond lors du survol
souris */
background-image: url(fond_cadre.jpg) ; /* place une image de fond */
border-style:inset ; /* relief enfoncé sur l'encadrement
des boutons */
font-size:140%} /* augmente de 40% la police du bouton lors du survol
*/
</style>
</head>
<body>
<a class="menu1" href="">Accueil</a> <!-- Bouton 1 -->
<a class="menu1" href="">Articles</a> <!-- Bouton 2 -->
<a class="menu1" href="">Liens</a> <!-- Bouton 3 -->
<a class="menu1" href="">Écrire</a> <!-- Bouton 4 -->
</body>
</html>
COMMENTAIRES
Ce système est simillaire au précédent, avec 2 modifications :
- La police augmente lors du passage de la sourie. Pour ne pas décaler les lignes de la page, il faut que le bouton soit assez haut et large pour acceuillir la nouvelle taille de police.
- Une image de fond apparait lors du passe du bouton. On peut bien sur aussi placer une image sur le bouton d'origine, ce qui n'est pas fait ici. Télécharger l'image de fond.
- 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.
NB : on note qu'on continue à changer la couleur de fond du bouton lors du survol. C'est normalement inutile, puisque l'image cache la couleur du fond. Mais il arrive que les images ne se chargent pas (image abimée sur le serveur, débit très lent, paramétrage du navigateur pour ne pas les afficher,...). Dès lors, la couleur redevient utile.