[Résolu] Remplacement d'une image par une autre au survol

Bonjour,

Je tente (désespérément!) de modifier une image par une autre au survol de la souris.
Rien à faire.
Je mets en application des codes trouvés sur des tutos, mais je fais probablement une erreur quelque part, erreur que je ne trouve pas!
Aucune image ne s'affiche, ni celle avant le survol, ni celle pendant le survol.
Et pourtant je l'ai fait il y a quelques années, mais ça ne fonctionne plus. (idem, images dans un tableau)
Voici la partie de code concernée : (j'ai juste des include en php sur la page)

	<table>
					 <td id="douze"></td>
				</tr>
			</table>

Voici la partie de code CSS associée :

#douze {
  background-image : url('http://www.site.fr/2012.jpg') no-repeat;
  height:130px;
  width:280px;
}

#douze:hover {
  background-image : url('http://www.site.fr/2012hover.jpg') no-repeat;
}

D'avance merci pour votre assistance!

Modifié par mailbox13630 (17 Mar 2021 - 16:44)

Hello,
Tu y es presque. Il faut simplement savoir que si tu utilises background-image, alors tu ne peux définir qu'une image (l'url dans ce cas). Ce qui veut dire que le no-repeat est de trop.
Tu as comme option:
- Changer "background-image" en "background". Background est un raccourci pour prendre en option color, image, repeat, et ou position. Par ex:

div{background: yellow url('img.svg') no-repeat center left;}

- Garder background-image mais bouger le no-repeat dans la propriété background-repeat

div{
background-image: url('img.svg');
background-repeat: no-repeat;
}

Bonjour et merci pour votre réponse!

J'ai modifié les instructions sur la feuille de style comme vous me l'avez indiqué, mais les images n'apparaissent toujours pas.
J'ai vérifié l'url de mes images (au cas où!), et elles sont correctes.
Le cache est bien vidé, (j'ai vérifié le code source)

#douze {
 background-image : url('http://www.site.fr/2012.jpg') ;
 background-repeat: no-repeat;
 height:130px;
 width:280px;
}

#douze:hover {
 background-image : url('http://www.site.fr/2012hover.jpg') ;
 background-repeat: no-repeat;
}

Merci!