Magazine Internet

Bouton CSS avec effet de rollover (survol)

Publié le 27 août 2007 par Tonylepsie

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 ^^).

Script css

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

Script html

     <div class="rollover"><a href="#" title="lien"></a></div>
 

Et voilà le tour est joué

Petite démo de ce que cela peut donner :

.rollover { width: 180px; height: 40px; background: transparent url(http://webdev.jegalere.fr/wp-content/uploads/2007/08/img2.gif) no-repeat; } .rollover a { display: block; width: 100%; height: 100%; background: url(http://webdev.jegalere.fr/wp-content/uploads/2007/08/img1.gif) no-repeat; } .rollover a:hover { /* masquage de lien.jpg au survol */ background: transparent none; } bouton, css, rollover, tuto, xhtml

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Tonylepsie 3 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog