Problème de feuillee de style css

imene -  
maka54 Messages postés 698 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

j'ai 3 boutons de type image dans une page html,
je veux changer l'image lorsque je clic sur le boutons.
J'ai une solution html qui marche

voila le code:
<a href="i.html " class="b1"><img src="mon image1.jpg" onmouseover="this.src='images/mon image2.jpg"></a>

<a href="a.html " class="b1"><img src="mon image3.jpg" onmouseover="this.src='images/mon image4.jpg"></a>

<a href="c.html " class="b1"><img src="mon image5.jpg" onmouseover="this.src='images/mon image6.jpg"></a>

je veux faire le meme chose avec le css parce j'ai beaucoup de page html qui contient ces boutons.

j'essaie de trouver une solution,j'écrit ce code mais ça marche pas:
dans html:
<div class="button">
<a href="i.html " class="b1"> </a>
<a href="a.html " class="b2"> </a>
<a href="c.html " class="b3"></a>
</div>

en css:
.button.b1 {
background-image: url(images/mon image1.jpg);
}
.button.b1:hover {
background-image: url(images/mon image2.jpg);
}

.button.b2 {
background-image: url(images/mon image3.jpg);
}
.button.b2:hover {
background-image: url(images/mon image4.jpg);
}
.button.b3 {
background-image: url(images/mon image5.jpg);
}
.button.b3:hover {
background-image: url(images/mon image6.jpg);
}


A voir également:

1 réponse

Réponse 1 / 1
pseudo
  
.button.b1 {  
background-image: url(images/mon image1.jpg);  
display:block;  
height:...;  
width:...;  
}


avant tu avais la balise <img> donc la balise <a></a> n'etait pas vide

si tu le fais en css, <a></a> est vide donc n'affiche rien, tu dois lui mettre la propriété display:block; et peut etre width et height en plus, à tester (taille de l'image)
0
imene
 
ça marche pas,pouvez-vous m'aider par une solution complète?
merci d'avance
0
Techno01
 
vous devez utiliser des javascript pour faire cela
0
maka54 Messages postés 698 Date d'inscription   Statut Membre Dernière intervention   80
 
pas besoin de javascript pour faire cela ....

il faut remplacer button par a 
a.b1 {  
background-image: url(images/mon image1.jpg);  
display:block;  
height:...;  
width:...;  
}


OU mettre un espace entre entre .button et .b1 

.button .b1 {  
background-image: url(images/mon image1.jpg);  
display:block;  
height:...;  
width:...;  
}
0

Discussions similaires

Problème de table des matières
LIlly -
LIlly -

6 réponses