web-dev-qa-db-fra.com

Changer d'image en survol avec CSS / HTML

J'ai ce problème lorsque j'ai paramétré une image pour qu'elle affiche une autre image lorsque la souris survole la souris, cependant la première image apparaît toujours et la nouvelle ne change pas de hauteur ni de largeur et chevauche l'autre. Je suis encore assez nouveau en HTML/CSS et j'ai donc peut-être manqué quelque chose de simple. Voici le code:

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}
htmlcssimagehover
72
user2704743

Une solution consiste à utiliser également la première image comme image d’arrière-plan, comme ceci:

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

Si votre image over a une taille différente, vous devez les définir comme suit:

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
81
Aurelio De Rosa

Une autre option consiste à utiliser JS:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
94
kurdtpage

Ce que je fais habituellement, c’est que je crée une image double avec les deux états, agissant comme une sorte de film à deux images que j’utilise ensuite comme arrière-plan pour l’élément d’origine, de sorte que la largeur/hauteur de l’élément soit définie en pixels, ce qui a pour effet de montrer seulement une moitié de l'image. Ensuite, l’état de survol définit ce qui suit: "déplacez le film pour afficher l’autre image".

Par exemple, imaginons que l'image doit être un Tux gris, que nous devons passer à un Tux coloré en survol. Et l'élément "hosting" est une extension avec l'id "tuxie".

  1. Je crée une image 50 x 25 avec deux Tux, un en couleur et un gris,
  2. puis assignez l'image en tant qu'arrière-plan pour une plage de 25 x 25,
  3. et finalement définissez le survol pour déplacer simplement le fond 25px à gauche.

Le code minimal:

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />

et l'image:

Two-frame Tuxie "film"

Les avantages sont:

  • En plaçant les deux images dans un seul fichier, elles sont chargées en même temps. Cela évite le mauvais problème sur les connexions plus lentes lorsque l'autre image ne se charge jamais immédiatement, de sorte que le premier vol stationnaire ne fonctionne jamais correctement.

  • Il sera peut-être plus facile de gérer vos images de cette façon, car les images "associées" ne sont jamais confondues.

  • Avec l'utilisation judicieuse de Javascript ou du sélecteur CSS, on peut l'étendre et inclure encore plus de cadres dans un fichier.

    En théorie, vous pouvez même placer plusieurs boutons dans un seul fichier et régir leur affichage par des coordonnées, bien qu'une telle approche puisse rapidement devenir incontrôlable.

Notez que ceci est construit avec la propriété background CSS, donc si vous avez vraiment besoin d’utiliser avec <img />s, vous devez not définir la propriété src car elle chevauche la Contexte. (On en vient à penser qu'une utilisation intelligente de la transparence ici pourrait donner des résultats intéressants, mais probablement très dépendants de la qualité de l'image ainsi que du moteur.).

51
Alois Mahdal

Utilisez content:

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
    height: 70px;
    width: 120px;
}

JSFiddle

32
Vucko

Le problème avec toutes les réponses précédentes est que l'image de survol n'est pas chargée avec la page. Par conséquent, lorsque le navigateur l'appelle, le chargement prend du temps et tout ne semble pas très beau.

Ce que je fais est que je mette l'image originale et l'image de survol dans 1 élément et masque l'image de survol dans un premier temps. Puis, en stationnaire, j'affiche l'image en vol stationnaire et cache l'ancienne, et en faisant le vol stationnaire, je fais le contraire.

HTML:

<span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')">
  <img src="stylesheets/images/bell.png" class=bell col="g">
  <img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b">
</span>

JavaScript/jQuery:

function hvr(dom, action)
{
    if (action == 'in')
    {
        $(dom).find("[col=g]").css("display", "none");
        $(dom).find("[col=b]").css("display", "inline-block");
    }

    else
    {
        $(dom).find("[col=b]").css("display", "none");
        $(dom).find("[col=g]").css("display", "inline-block");
    }
}

C'est pour moi le moyen le plus simple et le plus efficace de le faire.

5
Y2H
.hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */
.hide {display:none}
/* Do the shift: */
.hover_image:hover img:first-child{display:none}
.hover_image:hover img:last-child{display:inline-block}
<body> 
    <a class="hover_image" href="#">
        <!-- path/to/first/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" />
        <!-- path/to/hover/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" />
    </a>
</body>

Pour essayer d'améliorer cette bonne réponse de Rashid, j'ajoute quelques commentaires:

L'astuce est effectuée sur le wrapper de l'image à échanger (une balise 'a' mais peut-être une autre) afin que la classe 'hover_image' y ait été placée.

Avantages:

  • Garder les deux images ensemble au même endroit aide si elles doivent être changées.

  • Semble également fonctionner avec les anciens navigateurs (norme CSS2).

  • C'est explicite.

  • L'image de survol est préchargée (pas de retard après le survol).

5
Darío Pm

Vous pouvez remplacer l'image d'un IMG HTML sans avoir à apporter de modifications à l'image d'arrière-plan du conteneur div.

Ceci est obtenu en utilisant la propriété CSS box-sizing: border-box; (elle vous permet de placer très efficacement un effet de survol sur un <IMG>.)

Pour ce faire, appliquez une classe comme celle-ci à votre image:

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

Exemple de code: http://codepen.io/chriscoyier/pen/cJEjs

Article original: http://css-tricks.com/replace-the-image-in-an-img-with-css/

J'espère que cela aidera certains d'entre vous qui ne veulent pas mettre une div à obtenir une image ayant un effet de "survol".

Publiant ici l'exemple de code:

HTML:

<img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

jQuery:

$("#myImage").mouseover(function () {
    $(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
    $(this).attr("class", "ClassBeforeImage-replacement");
});
4
Nishanth Shaan

Vous ne pouvez pas utiliser CSS pour modifier les attributs d'image SRC (sauf si le navigateur le prend en charge). Vous voudrez peut-être utiliser jQuery avec l'événement hover.

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);
3
Asaf

Changez la balise img en div et donnez-lui un arrière-plan en CSS.

1
Jacques ジャック
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
<body> 
    <a class="foo" href="#">
        <img src="http://lojanak.com/image/9/280/280/1/0" />
        <img src="http://lojanak.com/image/0/280/280/1/0" />
    </a>
</body>
1
Rashid

vérifier ceci violon

Je pense que le chemin de l'image peut être faux dans votre cas

la syntaxe semble juste

background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');
1
Vignesh Subramanian

Ma solution jQuery.

function changeOverImage(element) {
        var url = $(element).prop('src'),
            url_over = $(element).data('change-over')
        ;

        $(element)
            .prop('src', url_over)
            .data('change-over', url)
        ;
    }
    $(document).delegate('img[data-change-over]', 'mouseover', function () {
        changeOverImage(this);
    });
    $(document).delegate('img[data-change-over]', 'mouseout', function () {
        changeOverImage(this);
    });

et html

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

Démo: démo JSFiddle

Cordialement

1
iBet7o

essayez-en un

<img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

ou si vous utilisez l'image comme un bouton dans la forme

<input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()">
function fnover()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button2.png";
        }

        function fnout()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button.png";
        }
1
Adiii

Ce que je recommanderais est d'utiliser uniquement CSS si possible. Ma solution serait:

HTML: 

<img id="img" class="" src="" />

CSS: 

img#img{
    background: url("pictureNumberOne.png");
    background-size: 100px 100px;
    /* Optional transition: */
    transition: background 0.25s ease-in-out;
}
img#img:hover{
    background: url("pictureNumberTwo.png");
    background-size: 100px 100px;
}

Cela (en ne définissant pas l'attribut src ) garantit également que les images transparentes (ou les images avec des parties transparentes) sont affichées correctement (sinon, si la seconde image est semi-transparente, voir aussi des parties de la première image).

L'attribut background-size est utilisé pour définir la hauteur et la largeur d'une image d'arrière-plan.

Si (pour une raison quelconque) vous ne souhaitez pas modifier l'image bg d'une image, vous pouvez également placer l'image dans un conteneur div comme suit:

HTML: 

<div id="imgContainer" class="">
    <img id="" class="" src="" />
</div>

... etc.

0
T.Meyer

Tout le monde répond en utilisant l'option background-image, il leur manque un attribut. La hauteur et la largeur définiront la taille du conteneur pour l'image mais ne redimensionneront pas l'image elle-même. background-size est nécessaire pour compresser ou étirer l'image afin de l'adapter à ce conteneur. J'ai utilisé l'exemple de la "meilleure réponse"

<div id="Library"></div>
#Library {
   background-image: url('LibraryTransparent.png');
   background-size: 120px;
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}
0
Fi Horan

Il suffit d’utiliser Photoshop et de créer deux images identiques, la première étant l’affichage souhaité, la deuxième l’affichage souhaité. J'emballe l'image dans une balise <a>, parce que je suppose que c'est ce que vous voulez. Pour cet exemple, je fais une icône facebook qui est désaturée, mais quand survolé, elle affichera la couleur bleue de Facebook.

<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>
0
Phong Ly

Le problème est que vous définissez la première image avec l'attribut 'src' et, en survolant, ajoutez à l'image une image d'arrière-plan. essaye ça:

en html utiliser:

<img id="Library">

puis en css:

#Library {
    height: 70px;
    width: 120px;
    background-image: url('LibraryTransparent.png');
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}
0
Tomzan

Voici le truc simple. Il suffit de copier et coller.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Change Image on Hover in CSS</title>
    <style type="text/css">
        .card {
            width: 130px;
            height: 195px;
            background: url("../images/card-back.jpg") no-repeat;
            margin: 50px;
        }
        .card:hover {
            background: url("../images/card-front.jpg") no-repeat;
        }
    </style>
    </head>
    <body>
        <div class="card"></div>
    </body>
    </html>
0
Lokesh Thakur

Exemple en direct: JSFiddle

La réponse acceptée a un problème. L'image n'a pas été redimensionnée à cet endroit. Utilisez la propriété background-size pour redimensionner l'image.

HTML:

<div id="image"></div>

CSS:

#image {
   background-image: url('image1');
   background-size: 300px 390px;
   width: 300px;
   height:390px;
}

#image:hover{
  background: url("image2");
  background-size: 300px 390px;
}
0
Md. Rafee

Dans la façon dont vous faites les choses, cela n'arrivera pas. Vous modifiez l'image d'arrière-plan de l'image, qui est bloquée par l'image d'origine. Changer la hauteur et la largeur ne se produira pas non plus. Pour modifier l'attribut src de l'image, vous avez besoin de Javascript ou d'une bibliothèque Javascript telle que jQuery. Vous pouvez toutefois modifier l’image en une simple zone de texte (div) et créer une image d’arrière-plan qui change au survol, même si la zone de division elle-même sera vide. Voici comment.

<div id="emptydiv"></div>

#emptydiv {

background-image: url("LibraryHover.png");
height: 70px;
width: 120px;

}

#emptydiv:hover {

background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;

}

J'espère que c'est ce que vous demandez :)

0
Daniel Schwarz