Changer d'image au survol, quel code dans css ?
Bonjour je souhaite que l'image change au passage de la souris...
il s'agit de deux images "imageA" et "imageB" l'une a un logo blanc et l'autre rouge. Elles représentent le bouton "contact" de mon site INternet.
- voici mon code html :
<div>
<a href="contact.html"><img src="imageA.png" alt="contact" class="contact" id="contact"></a>
</div>
et dans mon fichier .css, voici le code que j'ai ajouté et qui ne fonctionne pas :
.contact
{
background: url('images/imageA.png') no-repeat;
display: block;
margin: 5px;
}
.contact:hover
{
background: url('images/imageB.png') no-repeat;
}
Je ne comprends pas pourquoi ça ne fonctionne pas. Quelle est l'erreur et comment faire...
par avance merci,
Gaspar
il s'agit de deux images "imageA" et "imageB" l'une a un logo blanc et l'autre rouge. Elles représentent le bouton "contact" de mon site INternet.
- voici mon code html :
<div>
<a href="contact.html"><img src="imageA.png" alt="contact" class="contact" id="contact"></a>
</div>
et dans mon fichier .css, voici le code que j'ai ajouté et qui ne fonctionne pas :
.contact
{
background: url('images/imageA.png') no-repeat;
display: block;
margin: 5px;
}
.contact:hover
{
background: url('images/imageB.png') no-repeat;
}
Je ne comprends pas pourquoi ça ne fonctionne pas. Quelle est l'erreur et comment faire...
par avance merci,
Gaspar
3 réponses
-
Ce que tu veux c'est du code pour le Rollover, c'est a dire que l'image change si la souris passe dessus.
Je te laisse le choix http://www.google.fr/...
(dsl pour la taille du lien xD) -
Bonjour,
En fait (en résumé) il y a confusion entre l'image (img) et le fond (background) de l'image.
Tu peux faire quelque chose de très simple comme ceci et il faut définir la taille de ton background dans le CSS.
HTML<div class="contact"> <a href="contact.html"></a> </div>
CSS.contact { width:100px; height:400px; background:url('images/imageA.png') no-repeat; display:block; margin:5px; } .contact:hover { background:url('images/imageB.png') no-repeat; }
@+ -
merci c'est tout à fait ça !
