CSS: Changer l'image src sur img: hover

J'ai besoin de changer l' <img>URL source sur hover.

J'ai essayé mais ne fonctionnera 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.

Mettre à jour:

Cela ne fonctionne que pour Webkit / Google Chrome.

Avec seulement html et css, il n'est pas possible de changer le src de l'image. Si vous remplacez la balise img par la balise div, vous pourrez peut-être modifier l'image 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 que vous pouvez utiliser du code javascript, vous devriez pouvoir changer 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);" />

J'ai modifié quelques changements liés à 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/

J'ai eu un problème similaire mais ma solution était d'avoir deux images, une cachée (affichage: aucune) et une visible. Au survol d'une étendue environnante, l'image d'origine change pour afficher: aucun et l'autre image à afficher: bloc. (Peut utiliser 'inline' à la place selon vos circonstances)

Cet exemple utilise deux balises span au lieu d'images afin que vous puissiez voir le résultat lors de son exécution ici. Je n'avais malheureusement aucune source 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>

Ce que vous pouvez faire est de tricher un peu en définissant widthet heightà 0 pour masquer l'image réelle et appliquer du 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 fait de la imgbalise la taille que vous voulez qu'elle ait (la moitié de la taille de votre image réelle).

Violon

Voici une approche alternative utilisant du 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 sur: 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 sont de mêmes dimensions pour un affichage correct. En outre, ces tailles de fichier d'images sont assez petites, donc le chargement de plusieurs images n'est pas un problème dans ce cas, mais peut l'être si vous souhaitez basculer l'affichage d'images de grande taille.

Concernant la sémantique, je n'aime aucune solution donnée 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 CSS uniquement avec une bonne compatibilité avec les navigateurs. Il utilise un wrapper d'image qui a un arrière-plan qui est initialement masqué par l'image elle-même. En survol, l'image est masquée à travers l'opacité, par conséquent l'image d'arrière-plan devient visible. De cette façon, on n'a pas de wrapper vide mais une image réelle dans le code de balisage.

J'ai encore une 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 ^^.

J'ai eu un problème similaire - je veux remplacer l'image sur: survoler mais je ne peux pas utiliser BACKGRUND-IMAGE en raison du manque de conception adaptative de Bootstrap.

Si vous comme moi ne voulez changer l'image que sur: survolez (mais n'insistez pas pour changer SRC pour la balise d'image donnée), vous pouvez faire quelque chose comme ça - c'est une solution CSS uniquement.

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 IE7, vous pouvez masquer / afficher: l'image HOVER en positionnant pas par opacité.

Puisque vous ne pouvez pas changer le srcavec CSS: Si jQuery est une option pour vous, vérifiez ce violon.

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 utilise essentiellement la .hover()méthode ... il faut deux fonctions pour le faire fonctionner. Lorsque vous entrez dans le survol et lorsque vous le quittez.

Nous utilisons le .attr(abréviation pour attribut) pour changer l' srcattribut.

Il convient de noter que vous avez besoin de la bibliothèque jQuery incluse comme dans le violon pour que cela fonctionne.

Violon

D'accord avec la réponse d'AshisKumar,
il existe un moyen de changer l'URL de l'image au survol 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
    });
 });

Personnellement, j'irais avec l'une des solutions JavaScript / jQuery. Non seulement cela conserve votre sémantique HTML (c'est-à-dire qu'une image est affichée comme un élément img avec son image src habituelle définie dans le balisage), mais si vous utilisez une solution JS / jQuery, vous pourrez également utiliser le JS / jQuery pour précharger votre image de survol.

Le préchargement de l'image de survol signifiera qu'il n'y aura probablement pas de retard de téléchargement lorsque l'utilisateur survole l'image d'origine, ce qui entraînera un comportement beaucoup plus professionnel de votre site.

Cela signifie que vous avez une dépendance à JS, mais la petite minorité qui n'a pas activé JS ne sera probablement pas trop agitée - et tout le monde aura une meilleure expérience ... et votre code sera bon aussi!

Vous ne pouvez pas modifier imgl' srcattribut de la balise avec CSS. Possible en utilisant le gestionnaire d'événements Javascript onmouseover() .

HTML:

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

Javascript:

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

Vous ne pouvez pas modifier l'img src à l'aide de css. Vous pouvez cependant utiliser la solution css pure suivante. HTML:

<div id="asks"></div>

CSS:

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

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

Ou, si vous ne souhaitez pas utiliser un div avec une image d'arrière-plan, vous pouvez utiliser une solution javascript / jQuery. Html:

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

jQuery:

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

Pour cela, vous pouvez utiliser le code ci-dessous

1) html

<div id = "aks">

</div>

2) css

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

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

}

Sur les navigateurs plus anciens, :hoverne fonctionnait que sur les <a>éléments. Il faudrait donc faire quelque chose comme ça pour que ça marche.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

Le code suivant fonctionne à la fois sur Chrome et Firefox

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

Voici une solution CSS pure. Mettez l'image visible dans la balise img, mettez la deuxième image en arrière-plan dans le css, puis masquez l'image en survol.

.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           

<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>

La meilleure façon de changer srcd'image est:

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Voir la démo en direct: http://www.audenaerde.org/csstricks.html#imagereplacecss

Prendre plaisir!

Essayez ce code.

   .card {

            width: 200px;

            height: 195px;

            position: relative;

            display: inline-block;

        }

        .card .img-top {

            display: none;

            position: absolute;

            top: 0;

            left: 0;
           
            z-index: 99;
width:200px;
        }

        .card:hover .img-top {

            display: inline;

        }

 <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Image Change on Hover with CSS</title>

 
    </head>

    <body>

        <div class="card">

            <img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">

            <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">

        </div>

    </body>

    </html>

Il existe un autre moyen simple d'utiliser uniquement HTML et CSS!

Enveloppez simplement votre <img>tag avec div comme ceci:

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

Ensuite, dans votre fichier CSS, masquez l'img et définissez l'image d'arrière-plan de l'élément div d'emballage:

.image-wrapper:hover {
    background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}

.image-wrapper:hover img {
    display: none;
}

Et voilà!