Bouton CSS avec effet de rollover (survol)
Vous souhaitez faire un lien avec une image pour votre menu avec un rollover.
La solution la plus simple au premier abord serait de faire ça en utilisant des balises Javascript telles que OnMouseOver et OnMouseOut.
Cependant tout ceci d’une part n’est pas très valide XHTML et qui plus est si la personne n’a pas activé le JS sur son navigateur, point de rollover (et point de lien d’ailleurs) :S
Pas génial surtout que pour ce genre de chose le JavaScript n’est pas conseillé (enfin moi je limite le js pour ce genre d’usage du moins)
Voyons plutôt une façon de faire en CSS beaucoup plus propre a mon sens.
Le principe est de creer une classe pour une div ou un p qui aura comme background l’image censée s’afficher au rollover. Ca ne parait pas logique certes, mais ca va le devenir très vite car on met sur le lien (balise a) l’image visible quand l’image n’est pas survolé (ou rollout si je puis me permettre ^^). Et on “supprime” l’image en background quand on la survole (a:hover)
.rollover {
width: 150px;
height: 30px;
background: transparent url(img/lien_rollover.jpg) no-repeat;
}
.rollover a {
display: block;
width: 100%;
height: 100%;
background: url(img/lien.jpg) no-repeat;
}
.rollover a:hover { /* masquage de lien.jpg au survol */
background: transparent none;
}
Notez que j’indique la hauteur et largeur (height et width) suivant la taille de l’image utilisée étant donné que nous faisons “un lien vide” comme ci-dessous :
<div class="rollover"><a href="#" title="lien"></a></div>
Et voilà le tour est joué 
Petite démo de ce que cela peut donner :
Après si vous êtes un dosé de W3C et que ca vous ferez mal de faire un lien vide (sachant qu’il est aussi préférable de mettre du texte pour un lien question référencement), deux options s’offrent à vous :
- soit vous ne faites le rollover que sur le fond de l’image et mettez le texte du lien entre les balises <a> </a> mais cette option ne vous permet d’utiliser que des typos basiques
- soit vous ajoutez un texte dans une balise <span> avec un style CSS qui masque ce texte comme nous suggérait Pablo. Ce qui nous donnerez :
.rollover a span{
visibility:hidden
}
Et pour l’html pas de suprise :
<div class="rollover"><a href="#" title="lien"><span>Le nom du lien</span></a></div>
Tags : bouton, css, rollover, tuto, xhtml.
Le 27/08/2007 à 17:02
Bouton CSS avec effet de rollover (survol)…
Comment raliser un lien image avec un rollover en CSS de 2 temps 3 mouvements…
Le 28/08/2007 à 12:33
Très interessant, cependant pour des question d’accessibilité, de lisibilité du code, il est dommage de laisser le lien vide. Je rajouterai quelque chose du genre : Nom du lien
Le 28/08/2007 à 12:34
merci wordpress de supprimer les codes CSS, il faudrait donc écrire le lien dans le document html avec la propriété visibility hidden
Le 28/08/2007 à 13:22
Après on peut faire un rollover juste sur l’image de fond et mettre le titre en texte
C’est vrai que c’est mieux question accéssibilité, lisibilité du code et référencement
Le 13/09/2007 à 17:22
Simple et efficace, un bon p’tit bout de code!
Le 28/11/2007 à 23:08
Bonjour, excellent tuto, mais je galère pas mal (c’est pourquoi je suis sur votre site - lol), pour faire la chose suivante :
je voudrais qu’une fois cliqué, le bouton reste dans le même état que lorsqu’on le survole (dans votre exemple, une fois cliqué, il resterait blanc, et ne redeviendrait pas bleu, pour signaler que le lien a déjà été affiché). Est-ce possible ? Merci.
Le 29/11/2007 à 15:43
Ce que tu veux c’est qu’une fois qu’on est sur la page vers lequel pointe le bouton, le bouton reste en état survol ?
Le 11/06/2008 à 11:22
Hello !
Oui on aura peut-être de bonnes surprises ?
En tout cas safari semble loin devant firefox 3 qui n’est même pas encore sorti !