Comment changer la source de la balise <img> au survol ?

Question

Je dois changer <img> URL source sur hover .

J'ai essayé mais ça ne marche pas :

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

Toute aide serait appréciée.

Mise à jour :

Cela ne fonctionne que pour Webkit / Google Chrome.

Answer 1

Avec seulement html et css, il n'est pas possible de changer le src de l'image. Si vous remplacez la balise img par une balise div, vous pourrez peut-être modifier l'image qui est définie comme arrière-plan, comme suit

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Et si vous pensez pouvoir utiliser du code javascript, vous devriez être en mesure de modifier le src de la balise img comme ci-dessous

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Answer 2

J'ai modifié quelques changements relatifs à Patrick Kostjens.

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

Answer 3

Voici une autre approche utilisant le CSS pur. L'idée est d'inclure les deux images dans le balisage HTML et de les afficher ou de les masquer en conséquence lors du :hover.

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle : https://jsfiddle.net/m4v1onyL/

Notez que les images utilisées ont les mêmes dimensions pour un affichage correct. De plus, la taille des fichiers de ces images est assez petite, de sorte que le chargement multiple n'est pas un problème dans ce cas, mais peut l'être si vous cherchez à activer l'affichage d'images de grande taille.

Answer 4

J'ai eu un problème similaire mais ma solution était d'avoir deux images, une cachée (display:none) et une visible. Au survol d'un span environnant, l'image originale passe en display:none et l'autre image en display:block. (Vous pouvez utiliser 'inline' à la place, selon les circonstances).

Cet exemple utilise deux balises span au lieu d'images, vous pouvez donc voir le résultat en l'exécutant ici. Malheureusement, je n'avais pas de sources d'images en ligne à utiliser.

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

Answer 5

Ce que vous pouvez faire, c'est tricher un peu en mettant width y height à 0 pour cacher l'image réelle et appliquer quelques CSS pour faire ce que vous voulez :

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Et le rembourrage qui rend le img marquez la taille que vous souhaitez lui donner (la moitié de la taille de votre image réelle).

Violon