A voir également:
- Changer d'image au survol css
- Changer dns - Guide
- Changer clavier qwerty en azerty - Guide
- Image iso - Guide
- Changer carte graphique - Guide
- Acronis true image - Télécharger - Sauvegarde
5 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
30 août 2017 à 16:17
30 août 2017 à 16:17
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 :
Au passage, préfère l'utilisation des classes plutôt que les id pour le css.
Bonne journée,
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,
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:
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
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:
<td style="width: 21px;"> </td> <td style="width: 24px;"> </td> <td style="width: 424px;"><img alt="" src="http://monsite.com/images/a/aut/autoportrait.jpg" style="width: 200px; height: 212px;" /></td> </tr>
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
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
31 août 2017 à 09:35
31 août 2017 à 09:35
Tu ne peux pas modifier l'image d'une balise img avec un hover css : https://jsfiddle.net/u7mnLobn/
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
<div class="image1"><img src="http://monsite.com/images/a/aut/autoportrait.jpg" style="height: 212px; width: 200px;" /></div>
le css est inchangé mais cela ne fonctionne pas...
et bien sûr j'ai intégrer le code css à ma page
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
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
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
31 août 2017 à 16:55
31 août 2017 à 16:55
Je ne sais pas comment m'exprimer plus clairement donc je me répète ^^
Tu ne peux pas modifier l'attribut src d'une balise img en css, il faut utiliser javascript avec par exemple onmouseover/out comme tu as du le tester, ou mieux avec un addEventListener('hover').
Donc 2 solutions possibles :
- Utiliser une balise img et utiliser javascript pour modifier l'image.
- Utiliser une balise div avec un background-image et css pour modifier l'image.
Tu ne peux pas modifier l'attribut src d'une balise img en css, il faut utiliser javascript avec par exemple onmouseover/out comme tu as du le tester, ou mieux avec un addEventListener('hover').
Donc 2 solutions possibles :
- Utiliser une balise img et utiliser javascript pour modifier l'image.
- Utiliser une balise div avec un background-image et css pour modifier l'image.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
en tout cas merci pour votre aide
zoro