NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » Rollover sans Javascript

Rollover sans Javascript


Une petite astuce pour rendre vos menus attractifs simplement et proprement. :-)



Définition simplifiée d'un rollover : Le principe est simple. Vous avez une balise de lien, vide. On la transforme en bloc et on met une image un peu spéciale (vous comprendrez plus tard) en fond. Pour activer la réactivité de l'image, on changera tout simplement de place le fond de la balise lien (devenue un block, n'est-ce pas).

Allez, assez parlé, on passe à la pratique. Avant de nous jeter tête baissée, faisons un récapitulatif de tout ce que nous avons besoin :

- Une balise lien vide
- Une class qu'on attribuera au lien qui le transformera en lien et lui mettera un fond par défaut
- Une image (ça, il faut que ça vienne de vous, il y a assez de lien sur le site pour vous en sortir ;))

Personnellement, je prendrais cette image au cours du tutorial :


Allez-y au boulot ! Je chronomètre !

Tic Tac
Tic Tac
Tic Tac
DRING !

Stop ! C'est fini ! :D
Allez, je vous fourni la correction. ;)

Il vous suffisait de faire :

En XHTML :

<a href="#" title="Test d'image réactive" class="rollover"></a>


En CSS :

a.rollover { /* On applique les propriétés aux balises lien contenant la class ìrollover" */
     display: block; /* On transforme notre balise lien inline en block */
     height: 65px;
     width: 271px;
     background: url(styles/images/citron.png); /* L'url de l'image change selon vos dossiers */
     background-repeat: no-repeat;
}

a.rollover:hover { /* Lors du survol des liens contenant la class ìrollover" */
     background-position: 0% -66px; /* On change la position du fond lors du survol */
}


Et voilà, le tour est joué !
Comme quoi on peut faire des choses simples avec des outils de base.

Sachez que ce procédé est souvent utilisé pour des menus, on peut avoir des effets vraiment sympathiques. Laissez libre cours à votre imagination et faites-nous de beaux menus. :)

Vous pouvez également vous en servir en dehors des menus, si votre site est constitué essentiellement d'images par exemple.

Vous avez du mal avec les rollover et voulez voir le résultat final de ce tutoriel? Cliquez ici.
Le 06/03/2006 par Vinchz

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

dlabarenor a écrit :


trop bien!!

c'est vrai également pour tous les autres tutoriels de ce site !!

comme pour le php le design tout y est expliqué bien bien
(mise à part quelques fautes d'orthographe très peu mais ?! )
mois qui vais sur le site du zero je trouve le vôtre tout aussi bien fait

de rien de rien...

kakashi a écrit :

ce code fonctionne t-il sur tous les navigateurs?

Freerider59 a écrit :

Très bon tuto, très clair.

Encore merci, il me sert bien.

Ajouter un commentaire sur ce tutoriel

CSS, Rollover, Survol, hover, Menu
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)