CSS:hover different pour chaque lien

21 juillet 2006 à 2:23:58

Bonjours, j'ai un probleme que je n'arrive pas a résoudre. Je veux changer l'image de fond chaque fois que l'utilisateur survole cette cellule.

voici mon CSS

.news
{
background-image: url(english/news4.PNG)
}

.news:hover
{
background-image: url(english/newsHover.PNG)
}

voici mon code HTLM

mon fichiers .css est dans le dossiers styles comme dit le code...

voici le code du liens

Quelle est le probleme?
_____________________
Cryptopsy-Crypto-Cryp

Anonyme

21 juillet 2006 à 2:54:11

Déjà ce code :

va rien afficher :-°

Laneya

21 juillet 2006 à 4:45:47

est-ce bien normal que ton fichier css n'ait pas d'extension?

sinon il faut rajouter ceci dans ton css :

.news
{
display: block;
width: 75px;
height: 25px;
background-image: url(english/news4.PNG);
}

75 et 25 étant les dimensions de tes images

cryptopsy30

21 juillet 2006 à 17:27:05

Citation : Zakmaf

Déjà ce code :

Code : HTML<a href="index3.2.htm" class="news"></a>

va rien afficher

J'ai selement enlever le text de mon lien en fait c'est

Une séries d'espace... Quand tu mes ton pointeur au dessu de se text invisible, le background de la cellule change. En faite c'est à quoi je veux arrivé.

J'ai ajouter le .css a ma ligne

et fait les modification suivante...

.news
{
display: block;
width: 119px;
height: 17px;
background-image: url(english/news4.PNG);

}

.news:hover
{
display: block;
width: 119px;
height: 18px;
background-image: url(english/newsHover.PNG);
}

Est-ce bien de cette maniere qu'on appele le code du CSS?

_____________________
Cryptopsy-Crypto-Cryp

Zazou

21 juillet 2006 à 17:36:07

index3 . 2 .htm ne veut strictement rien dire

cryptopsy30

21 juillet 2006 à 17:40:58

Pour simplifié les choses, je veux seulement que les images change lorsque je mes ma souris au dessus

Pour créé un menu plus dynamique. Soit, l'image comporte un fond gris, quand je met ma souris au dessus, le fond devien rouge. Simple exemple. (je ne veux pas utiliser bacground-color: ) mais changé la source. :-°

est-ce clair

Zazou

21 juillet 2006 à 18:34:14

Bah tu mets un hover o_O

a:hover {
background-image: url('Image.jpg);

cryptopsy30

22 juillet 2006 à 6:08:06

alors tous les liens aurons le meme images lors du "MouseOver"(hover).
J'ai un menu

News.png ------hover---> newshover.png
Contact.png ----hover---> contacthover.png
Liens.png ------hover---> lienshover.png
Comprend :euh:

Zazou

22 juillet 2006 à 14:46:48

Bah tu rajoutes une class à tes liens alors. Et tu utilises

.class a:hover {
background-image: url('Image.jpg);

cryptopsy30

23 juillet 2006 à 5:48:04

Tu peux me montere quoi mettre dans mon CSS et dans mon HTML

CSS: .class ...

HTML: <a class: ??</a> ...

Zazou

23 juillet 2006 à 16:49:16

Bah

.class1 a:hover {
background-image: url('Image_Lien_1.jpg');
}
.class2 a:hover {
background-image: url('Image_Lien_2.jpg');
}
.class3 a:hover {
background-image: url('Image_Lien_3.jpg');
}
.class4 a:hover {
background-image: url('Image_Lien_4.jpg');
}
.class5 a:hover {
background-image: url('Image_Lien_5.jpg');
}