Est-il possible de changer l'attribut img src en utilisant css?

Je suis en train de changer img src (pas le fond img src) avec css

<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>  

#btnUp{
    cursor:pointer;
}
#btnUp:hover{
    src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}

source d'informationauteur bonaca

  1. 3

    Pas - CSS peut seulement être utilisé pour modifier les CSS, les images de fond, pas de contenu HTML.

    En général des éléments de l'INTERFACE (pas de contenu) doit être rendu à l'aide de CSS, de milieux, de toute façon. La permutation des classes peut permuter les images d'arrière-plan.

  2. 23

    Vous pouvez utiliser : 

    content: url("/_layouts/images/GEARS_AN.GIF")
  3. 15

    Il y a un autre moyen de résoudre ce problème : l'utilisation de CSS box-sizing.

    HTML : 

    <img class="banner" src="http://domaine.com/banner.png">

    CSS : 

    .banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://domain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

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

  4. 3

    Vous ne pouvez pas définir l'image src attribut via CSS. vous pouvez obtenir de l'est, comme si tu voulais utiliser background ou background-image.

  5. 3

    vous pouvez essayer quelque chose comme cela

    <img id="btnUp" src="empty.png" alt="btnUp" />

    ou

    <div id="btnUp" title="btnUp"> <div/>  
    #btnUp{
    cursor:pointer;
    width:50px;
    height:50px;
    float:left;       
}

#btnUp{
    background-image:url('x.png')
}

#btnUp:hover{
    background-image:url('y.png')
}
  6. 3

    Vous pouvez utiliser CSS pour a) l'image d'origine invisible par le réglage de la largeur et de la hauteur à 0, ou de le déplacer hors de l'écran etc, et b) insérer une nouvelle image dans sa ::before ou ::après le pseudo-élément.

    Qui sera un gain de performance si, comme le navigateur va alors charger à la fois l'original et la nouvelle image. Mais il n'aura pas besoin de Javascript!

  7. 1

    Vous pouvez utiliser un mélange de JavaScript et de CSS pour y parvenir, mais vous ne pouvez pas faire cela avec CSS seul. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" />
    Au lieu de img vous pouvez mettre de nom de fichier sans fichier de type.

    function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}

    Alors vous utiliser CSS pour modifier la balise img ou l'id de votre goût.

  8. 0

    Vous pouvez définir l'image à une image transparente, puis changer l'image de fond comme:

    img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}

    Les images doivent être de la même taille. 🙁
    Espérons que cette aide!