css rollovers

20 oct. 2005, 11:12

Bonjour à tous,
j'essaye de créer des rollovers avec des images à partir de css, mais ça ne marche pas.
1-L'état normal du bouton est une image
2-L'état survolé du bouton est aussi une image
J'ai fait que qui suit en html

Code : Tout sélectionner

<p><a class="menu_01" href="#">&nbsp;</a></p>

et en css

Code : Tout sélectionner

a.menu_01 {
background-image: url('images/menu_01.jpg');	
}

a:hover.menu_01 {
background-image: url('images/menu_01-over.jpg');		
}

Mon pb c'est que les imges ne sont mêmes pas chargées, on ne voit rien.
Comment dois-je m'y prendre?

20 oct. 2005, 11:14

Je te redirige vers cet excellent tuto :

http://css.alsacreations.com/Tutoriels- ... age-unique

20 oct. 2005, 11:40

ce tuto est vraiment top! merci.
Juste une question:
Dans le tuto, les 5 boutons ont la même image, gérée par

Code : Tout sélectionner

ul#menu li a {...}

quelle syntaxe dois-je utiliser pour pouvoir charger une image différente pour chaque bouton?
Je suppose qu'il faut ajouter une classe pour chaque balise <a> mais je ne vois pas comment le rajouter au code précédent...peut tu m'orienter?

20 oct. 2005, 11:46

est ce que je peux faire un truc dans le genre

Code : Tout sélectionner

ul#menu li a.menu_01 {...}

20 oct. 2005, 11:48

Le rollover est effectué par :

Code : Tout sélectionner

ul#menu li a:hover
{
	background: url(bg_menu.gif) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
}

Le "a" est généralisé dans ce cas précis. Donc si tu veux faire appel à différentes images, tu dois ajouter d'autres classes.

Code : Tout sélectionner

ul#menu li a.rool1:hover
{
	background: url(bg_menu1.gif) no-repeat 0 -30px ;
	border: 1px solid #f97 ;
}

ul#menu li a.rool2:hover
{
	background: url(bg_menu2.gif) no-repeat 0 -30px ;
	border: 1px solid #f97 ;
}

ul#menu li a.rool2:hover
{
	background: url(bg_menu3.gif) no-repeat 0 -30px ;
	border: 1px solid #f97 ;
}

Et dans ton <a href> :

Code : Tout sélectionner

<a href="#" class="roll1">

<a href="#" class="roll2">

20 oct. 2005, 11:54

ajoute une id plutôt qu'une classe, si chaque bouton a une image différente

20 oct. 2005, 11:59

merci charabia, c clair comme de l'eau de roche!

21 oct. 2005, 15:42

Il y a même un moyen pour éviter le préchargement des images : faire une image unique et jouer avec le positionnement de l'affichage grâce à la CSS.

Voir >>ici<<

@+

css rollovers

Qui est en ligne