Problème de feuillee de style css

Fermé

imene - 17 nov. 2011 à 13:07
maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 - 18 nov. 2011 à 13:08

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:

Problème de feuillee de style css
Style word - Guide
Photo de profil stylé - Guide
Nom de profil facebook stylé - Guide
Taille bouton css - Forum HTML
Vous créez une table des matières ? commencez par appliquer un style de titre au texte sélectionné à partir de la galerie styles. - Forum Word

1 réponse

Réponse 1 / 1

pseudo
Modifié par pseudo le 17/11/2011 à 13:18

.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)

imene
17 nov. 2011 à 13:29

ça marche pas,pouvez-vous m'aider par une solution complète?
merci d'avance

Techno01
18 nov. 2011 à 12:18

vous devez utiliser des javascript pour faire cela

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
18 nov. 2011 à 13:08

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

[CSS] Forcé retour à la ligne

trait horizontal avec du css

Choisir un bon ID en ligne

sos je cherche un nom pour mon facebook

Avis site ma-sacoche

Discussions similaires

Newsletters