CSS : Comment changer la source (src) d'une image lors d'un passage de souris (img:hover) ?
Changer l'attribut src d'une image au passage de la souris peut être fait avec du langage CSS, mais tous les navigateurs ne l'interpréteront pas forcément.
Pour utiliser une solution visible par tous les navigateurs, vous devez soit modifier le HTML et le CSS en s'appuyant sur un autre élément, soit faire appel au langage JavaScript. Pour utiliser une technique CSS que tous les navigateurs reconnaissent, vous pouvez toujours vous appuyer sur le mot clé :hover, mais avec une <div> pour laquelle on va mettre une image de fond :
div {
background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Il suffit d'ajouter votre <div> dans votre code HTML pour obtenir une image qui change au passage de la souris.
Une deuxième solution consiste à utiliser des fonctions JavaScript pour changer dynamiquement la source de l'image au passage de la souris. Pour cela, 2 événements JavaScript seront utilisés : onmouseover qui se déclenche lorsque la souris survole l'élément et onmouseout qui est appelé lorsque la souris n'est plus sur l'élément. Le code de notre image ressemble donc à ça :
<img id=my-img src=http://dummyimage.com/100x100/000/fff onmouseover=passageDeLaSouris(this); onmouseout=departDeLaSouris(this); />
Dans les fonctions JavaScript, il vous suffira de modifier l'attribut src de l'image grâce aux fonctions DOM :
//Affecte la nouvelle image lorsque la souris survole l'élément
function passaeDeLaSouris(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
//Affecte l'image de départ lorsque la souris ne survole plus l'élément
function departDeLaSouris(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}