Problème de feuillee de style css

imene -  
maka54 Messages postés 721 Statut Membre -
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)
    0
    1. imene
       
      ça marche pas,pouvez-vous m'aider par une solution complète?
      merci d'avance
      0
    2. Techno01
       
      vous devez utiliser des javascript pour faire cela
      0
    3. maka54 Messages postés 721 Statut Membre 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

indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses