web-dev-qa-db-fra.com

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

J'essaie 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.*/
}
cssimagesrc
11
qadenza

Non - CSS ne peut être utilisé que pour modifier les images d'arrière-plan CSS, pas le contenu HTML.

En général, les éléments d'interface utilisateur (pas le contenu) doivent quand même être rendus avec des arrière-plans CSS. L'échange de classes peut échanger des images d'arrière-plan.

2
Diodeus - James MacFarlane

Vous pouvez utiliser : 

content: url("/_layouts/images/GEARS_AN.GIF")
25
gjgsoftware.com

Il existe un autre moyen de résoudre ce problème: utiliser la taille de la boîte CSS. 

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/

16
Ben Tayaa

Vous pouvez utiliser CSS pour a) rendre l’image originale invisible en définissant sa largeur et sa hauteur sur 0, ou en la déplaçant hors de l’écran, etc., et b) insérer une nouvelle image dans son pseudo-élément :: before ou :: after.

Ce sera un coup dur pour les performances, car le navigateur chargera alors l’image originale et la nouvelle image. Mais cela ne nécessitera pas Javascript!

4
Mr Lister

tu pourrais essayer quelque chose comme ça

<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')
}
3
daniel__

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

3
Dhaval Marthak

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

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

Ensuite, vous utilisez CSS pour modifier la balise img ou l'id à votre guise. 

1
Patrick

Vous pouvez définir l'image sur une image complètement transparente, puis changer l'image d'arrière-plan comme suit:

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

Les images doivent cependant avoir la même taille. :(J'espère que cela t'aides!

0
CookiePanda