Changer d'image au survol, quel code dans css ?
gasparaunavis
Messages postés
68
Statut
Membre
-
SweetRiver Messages postés 110 Statut Membre -
SweetRiver Messages postés 110 Statut Membre -
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
A voir également:
- Changer d'image au survol, quel code dans css ?
- Changer dns - Guide
- Code ascii - Guide
- Code puk bloqué - Guide
- Changer code pin - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
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)
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
CSS
@+
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;
}
@+