Nos tutoriaux vous ont aidé?
Partenaires
Webdesign Tutoriaux
Pix-creations
Snoupix
Dot design
Tutofactory
Artbook tuto blog
Antoine Evin
Cours Photoshop
Artspeak
PixBay
Microshyma
Retrographic
Tuto room
Photoshop
DreamSeed
Utopla
Target Graphik
Kwintox
Annuaire gratuit
Jeux de casino
Casinos en ligne
Forex
Backgammon
Online Casinos
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 :
En CSS :
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