28220 sujets

CSS et mise en forme, CSS3

RollOver CSS

Salut a tous,

Pour un petit site perso j'ai besoin de faire un rollover, et je voudrai le faire en CSS.
Le soucis que je rencontre est que mon lien n'est que l'image, pas de texte.

<a href="index.php?url=techniques"><img src="img/index-09.jpg"  width="47" height="116" border="0"></a>

Mais je sais pas trop le CSS a utiliser.

Kali_
a écrit :
Pour un petit site perso j'ai besoin de faire un rollover, et je voudrai le faire en CSS.


bonne idée Smiley smile

a écrit :
Le soucis que je rencontre est que mon lien n'est que l'image, pas de texte.


Vu ton code, il n'y a pas de texte....

a écrit :
Mais je sais pas trop le CSS a utiliser.


ça n'a rien avoir avec le problème du texte ?

Pour le code css, l'idée est d'utiliser la pseudo classe :hover

Après ça dépend de ce que tu veux Smiley smile

SI tu veux qu'une image change au survol, elle doit être en arrière plan et pas avec une balise img (ou alors tu utilises du js)
En fait le lien consiste a changer l'image au passage de la souris, disons je veux l'image : img01.jpg en tant normal et img01_on.jpg lorsque la souris est dessus.
Voila
<a id="rollover"></a>


et pour le css


a#rollover{
display: block;
width: xxpx;
height: xxpx;
backgroud: url(image1.jpg) no-repeat;
}
a#rollover:hover{
background-image: url(image2.jpg);
}


:)
j'ai bien lu les tuto du site Olivier, mais c'est qu'en essayant par moi meme a l'aide du tuto j'ai pas réussi.

Mon code : 
<a href="index.php?link=data" id="lien_gauche_data"></a>


Mon CSS :
a#lien_gauche_data{
display: block;
width: 47px;
height: 119px;
backgroud: url(img/index-06.jpg) no-repeat;
}
a#lien_gauche_data:hover{
background-image: url(img/index_on.jpg);
}

Quand la souris passe dessus, pas de probleme l'image apparait bien, mais au chargement de la page aucune image n'apparait alors que je voudrai que index-06.jpg apparaisse, ainsi que lorsque la souris a quitter le lien.

Merci de votre aide
As tu un exemple en ligne qu'on y voit plus clair ?

Et si tu suis le tuto que je t'ai indiqué, tu n'auras aucun soucis (la méthode est plus efficace sur le tuto, car elle n'utilise qu'une seule image)
Il manque le "n" de background dans ton code CSS pour les images (sans :hover)

Et je persiste, utilise la méthode avec une image unique présentée sur le tuto Smiley smile
Modifié par Olivier (15 Jun 2005 - 14:37)
ha lala mon cher olivier je suis désolé de faire des erreurs comme ca.
Merci bien.
Et je vais essayer comme tu dis juste avec une image a déplacer.
en tout cas merci a tous les deux.
Sujet clos
Aller à