CSS: Changer l'image src sur img: hover

117

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.

Hamed Kamrava
la source
contentne fonctionne qu'avec :beforeou :afteralors cela ne fonctionnera pas. Pourquoi ne pas utiliser un divavec une image d'arrière-plan et changer l'image d'arrière-plan en survol?
putvande
Je ne veux pas utiliser DIV.
Hamed Kamrava
Je ne pense pas que vous puissiez modifier l'attribut source uniquement avec CSS. jQuery ou JavaScript normal sont de bons candidats pour faire ça simple .... et je suis d'accord avec @putvande, le content:seul fonctionne avec :beforeou:after
sulfureux
Eh bien ... vous pouvez définir l'image d'arrière-plan de la imgbalise et supprimer simplement le srcde votre image. Bien que ce soit un peu étrange, cela fonctionnera. @HamedKamrava: Vous ne pouvez utiliser qu'une image ou pouvez-vous utiliser autre chose?
putvande
3
Cela ne fonctionne que pour CSS2. En CSS3 votre solution devrait fonctionner parfaitement parce qu'il n'y a pas besoin :beforeou :afterpseudo classes à utiliser content:url(...). Mise à jour: cela ne fonctionne que pour Webkit / Google Chrome.
Timo

Réponses:

154

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);" />

Ashis Kumar
la source
1
De plus, si vous utilisez l'option CSS, au cas où vous ne voudriez pas que l'image `` scintille '' alors qu'elle doit se charger en survol, vous pouvez la précharger sur votre page en la mettant quelque part cachée:<img src="..." style="visibility: hidden" />
Steven Jeuris
111

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/

Surya R Praveen
la source
5
Dans cet exemple, chaque fois que vous survolez et sortez, deux images sont chargées sur le réseau (elles doivent cependant être mises en cache après les premiers essais). Et c'est un comportement attendu. Parfois, il est important d'avoir un élément d'image sur la page, par exemple pour les exigences d'accessibilité, mais il est alors préférable d'afficher / masquer deux éléments d'image avec css. Dans la plupart des cas, changer l'attribut src de l'image avec JS est une mauvaise idée, essayez d'utiliser background-image si vous le pouvez.
Alexander Burakevych
18

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>

MichaelC
la source
2
Pour info, vous pouvez dire span#initialà la place despan[id="initial"]
Adam Katz
16

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

putvande
la source
pourquoi feriez-vous cela en utilisant un DIV?
gdbj
16

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.

jcruz
la source
3
@putvande l'approche peut être similaire, mais il s'agit d'un exemple de travail complet et simplifié qui fait un meilleur usage des sélecteurs CSS
jcruz
7

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.

Anonyme
la source
6

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 ^^.

Chalisi
la source
1
Si OP ne veut pas de Javascript, il est peu probable qu'une solution utilisant un framework JS soit pertinente, non?
Sharadh
1
Encore mieux (si personne ne veut utiliser Angular pour cela): jsfiddle.net/ec9gn/420 (ajout de ng-init et suppression complète du contrôleur).
Rahul Desai
bonne réponse .... je viens d'utiliser ng-init = "img = ''" sans avoir besoin de déclarer $ scope.img
Hatem Badawi il y a
4

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é.

e-kinst
la source
3

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.

sulfureux
la source
3

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
    });
 });
Naveen Kumar seul
la source
@Naveen Et comment utiliser aavec display:blockdiffère-t-il de div? Le sujet de départ voulait changer l' srcattribut de imgthrough csset non un tour de piste.
Cthulhu
2

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!

interdiction de la géo-ingénierie
la source
1

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";
}
Praveen
la source
Cette fonction fonctionne, mais lorsque l'utilisateur éloigne sa souris de l'image, l'image ne revient pas à l'image d'origine. Pouvez-vous aider à écrire ce code? Merci
1

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');});
Patrick Kostjens
la source
1

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');

}
Hiren Gardhariya
la source
1

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>
bobobobo
la source
1

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>
Manish
la source
0

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>
user3686007
la source
0

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>

Sunil Rajput
la source
0

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à!

mcgtrt
la source