Problème de feuillee de style css

imene -  
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);
}

1 réponse

  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)
    1. imene
      ça marche pas,pouvez-vous m'aider par une solution complète?
      merci d'avance
    2. Techno01
      vous devez utiliser des javascript pour faire cela
    3. maka54
      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:...;  
}

Discussions similaires

indice et exposant en css ?
yiv

19 réponses