18041 sujets

Questions générales et questions de débutants

:hover

Bonsoir.
Je voulais savoir si il était possible que lors du passage de la souris une image prenne la place de l'image initiale?
Merci à vous Smiley cligne
Une solution basique en javascript :

<img src="img/premiere.jpg" onMouseOver="this.src='img/seconde.jpg'" onMouseOut="this.src='img/premiere.jpg'">


Sinon avec jQuery aussi,
et hover en CSS si les images sont en background
En fait je débute en html/css je ne connais pas javascript, j'avais oublié de le préciser.
Par contre j'ai vu dans d'autres articles que l'on pouvait utiliser codepen pour poster ses codes mais je ne sais pas comment cela fonctionne...merci encore pour vos réponses
A défaut de connaître un début de javascript, une solution toute simple en css (voir plus haut) est de créer un class par exemple celui-ci : 
.rollover{background-image: ('dessus.jpg')}
.rollover:hover{background-image: ('dessous.jpg')}
Si cela ne fonctionne pas chez toi, vérifie d'abord le chemin d'accès à tes 2 img et ton écriture html
Modifié par pictural (19 Nov 2016 - 19:56)
Administrateur
Bonjour,

Comme tu l'auras probablement appris au fil des réponses, il y a 2 cas : élément img dans le code HTML ou image de fond définie en CSS (propriété background-image). Dans le 1er cas il faut du JS (quoiqu'avec 2 éléments img, une grosse magouille pourrait faire l'affaire mais nope), dans le 2e cas, la pseudo-classe :hover peut aider à définir une autre background-image que quand c'est pas :hover (et :focus sur les liens et boutons, pour ceux qui utilisent le clavier)

darkodeur a écrit :
En fait je débute en html/css je ne connais pas javascript, j'avais oublié de le préciser.
Par contre j'ai vu dans d'autres articles que l'on pouvait utiliser codepen pour poster ses codes mais je ne sais pas comment cela fonctionne...merci encore pour vos réponses

Tu peux y c/c (dans un 'New' pen) des bouts de code HTML CSS JS :
- pour HTML, l'outil te rajoutera l'élément body et tout ce qu'il faut. Tu peux y c/c une div ou autre morceau de code HTML
- pour CSS, tu c/c ta CSS dedans (dans les options tu peux rajouter normalize.css et/ou Autoprefixer qui sont 2 bonnes bases de travail. M'enfin faut surtout que ça colle à TON code)
- pour JS, l'outil te rajoute des balises <script> et </script> autour de ton code JS. Tu peux écrire direct "use strict"; var i=0; // etc
Merci à tous.
bizarre je ne reçois pas les notifications de réponses. Smiley confus
Merci à tous pour vos réponses.
oui filipe j'ai dû tatonner avec une liste 2 images.
merci
Sujet clos
Aller à