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

En ce qui concerne la sémantique, je n'aime aucune des solutions données jusqu'à présent. Par conséquent, j'utilise personnellement la solution suivante :

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

Il s'agit d'une solution uniquement CSS offrant une bonne compatibilité avec les navigateurs. Elle fait appel à une enveloppe d'image dont l'arrière-plan est initialement caché par l'image elle-même. Au survol, l'image est masquée par l'opacité, et l'image d'arrière-plan devient donc visible. De cette façon, on ne dispose pas d'une enveloppe vide mais d'une image réelle dans le code de balisage.

Answer 2

J'ai une autre solution. Si quelqu'un utilise AngularJs : http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

Le Javascript :

function ctrl($scope){
    $scope.img= '000';
}

Pas de CSS ^^.

Answer 3

Violon

Je suis d'accord avec la réponse d'AshisKumar,
il existe un moyen de changer l'url de l'image au passage de la souris en utilisant la fonctionnalité jQuery comme ci-dessous :

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

Answer 4

J'ai eu un problème similaire - je veux remplacer l'image au moment du :hover mais je ne peux pas utiliser BACKGRUND-IMAGE en raison de l'absence de la conception adaptative de Bootstrap.

Si, comme moi, vous voulez seulement changer l'image au :hover (sans insister sur le changement de SRC pour la balise image en question), vous pouvez faire quelque chose comme ceci - c'est une solution uniquement en CSS.

HTML :

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS :

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

Si vous voulez un code compatible avec IE7, vous pouvez masquer/afficher l'image :HOVER par son positionnement et non par son opacité.

Answer 5

Puisque vous ne pouvez pas modifier le src avec CSS : Si jQuery est une option pour vous, vérifiez cette astuce.

Démo

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

Il s'agit essentiellement d'utiliser le .hover() ... il faut deux fonctions pour que cela fonctionne. Quand vous entrez dans le survol et quand vous le quittez.

Nous utilisons le .attr (abréviation de "attribut") pour modifier le src attribut.

Il est important de noter que la bibliothèque jQuery doit être incluse comme dans le fiddle pour que cela fonctionne.