changer d'image au survol de la souris Fermé

Question

Bonjour, Je souhaite qu'une de mes images change lors du survol de la souris. Pour ça, j'ai regardé sur divers site et forum mais il y a quelque chose que je ne comprends pas... Y a t-il une erreur sur ces codes?

#1 { width:189px /* largeur de ton image */ height:200px /* hauteur de ton image */ background-image:url(http://adresse de mon image.jpg); } #1:hover { background-image:url(http://adresse de mon image pour survol.jpg); } y a t il une erreur? Je ne vois pas ce qui ne fonctionne pas et j'ai envie de comprendre! Merci beaucoup de bien vouloir m'aider Zoro Configuration: Windows / Firefox 55.0

Pitet · Answer

Salut,

Plusieurs erreurs :
- Il manque un point-virgule après les propriétés width et height dans ton css.
- Ton hover cible l'élément #1 qui correspond à ton div et pas à ton image. Pour cibler la balise image, il faut utiliser par exemple le sélecteur css #1 img (la balise image dans l'élément dont l'id vaut 1).
- La propriété background-image ne permet pas de changer l'image d'une balise img.
Pour modifier l'image de la balise img, il faut modifier l'attribut src de cette balise et ce n'est pas possible en css. Il faudrait alors utiliser javascript pour réaliser ceci.

Une solution pour ne pas avoir à utiliser javascript est de remplacer l'utilisation de la balise img par une simple balise div sur laquelle on va appliquer le background-image :

<div class="image1"></div>

.image1 {
  width: 189px;
  height: 200px;
  background-image: url('http://via.placeholder.com/198x200');
}

.image1:hover {
  background-image: url('http://via.placeholder.com/300x300');
}

Au passage, préfère l'utilisation des classes plutôt que les id pour le css.

Bonne journée,

.image1 { width: 189px; height: 200px; background-image: url('http://via.placeholder.com/198x200'); } .image1:hover { background-image: url('http://via.placeholder.com/300x300'); } Au passage, préfère l'utilisation des classes plutôt que les id pour le css. Bonne journée,

zoro · Answer

Bonjour, ALors voilà, j'ai un peu de mal... étant débutant c'est un peu compliqué mais bon je vais persévérer... J'ai inséré les codes comme je pensais être bien et l'effet hover ne marche pas donc forcément je fais une erreur... mais laquelle?? je n'arrive pas à intégrer correctement la div. Est ce parce que l'image se trouve dans un tableau ou cela n'a t il rien à voir? Je vous transmets mes codes: html:

les td devant correspondre au tableau je pense... css: .image1 { width: 200px; height: 212px; background-image: url('http://monsite.com/images/a/aut/autoportrait.jpg/200x212'); } .image1:hover { background-image: url('http://monsite.com/images/a/aut/autoportrait-2.jpg/200x212'); } lorsque je fais pour intégrer la div à mon image, celle ci disparait... je dois surement ne pas l'intégrer correctement... Merci de votre aide zoro

zoro · Answer

j'ai modifié mon html en :

le css est inchangé mais cela ne fonctionne pas... et bien sûr j'ai intégrer le code css à ma page

zoro · Answer

ok pitet...
alors comment changer une image au survol de la souris par une autre image?!
Là j'ai fait un remplacement en html avec onmouse....
mais je souhaite apprendre comment faire en css et créer une transition plus douce. (j'ai regarder sur internet mais j'aimerai une explication claire pour novice )
d'ailleurs si vous avez des site intéressant à ce sujet !)

merci pour votre aide
novis

zoro · Answer

simplement un petit message pour vous signifier qu'à force de persévérer , j'ai fini par trouver et réussir mon effet hover... avec bien évidemment bcp de difficultés mais j'y suis arrivé (pas toujours facile quand on ne connait pas tous les thermes informatiques!)

en tout cas merci pour votre aide
zoro

Changer d'image au survol de la souris

5 réponses

Discussions similaires