Modifier par programme le src d'une balise img

244

Comment puis-je changer l' srcattribut d'une imgbalise en utilisant javascript?

<img src="../template/edit.png" name=edit-save/>

au début, j'ai un src par défaut qui est "../template/edit.png" et je voulais le changer avec "../template/save.png" onclick.

MISE À JOUR: voici mon onclick html:

<a href='#' onclick='edit()'><img src="../template/edit.png" id="edit-save"/></a>

et mon JS

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }
}

J'ai essayé d'insérer cela dans edit (), cela fonctionne mais je dois cliquer deux fois sur l'image

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }
javascript html image src Jam Ville
la source

Réponses:

307

Donnez un identifiant à votre balise img, vous pourrez

document.getElementById("imageid").src="../template/save.png";
Matthias
la source
16
Pour des choses simples comme définir la valeur d'une entrée ou changer une image src ( particulièrement lorsque vous utilisez des éléments qui ont des ID), vous devriez vraiment essayer d'éviter jQuery, car l'appel est beaucoup plus lent que l'appel JS pur
Brian Leishman
2
@ william44isme et notre page sera chargée plus lentement qu'auparavant. je pense que le jQuery est utile uniquement pour les sites Web qui utilisent un même code, très plus. par exemple, si nous utilisons le code ci-dessus plus de 30 ou 50 fois. il est donc nécessaire d'utiliser jQuery
Mahdi Jazini
64

Vous pouvez utiliser à la fois la méthode jquery et javascript: si vous avez deux images par exemple:

<img class="image1" src="image1.jpg" alt="image">
<img class="image2" src="image2.jpg" alt="image">

1) Méthode Jquery->

$(".image2").attr("src","image1.jpg");

2) Méthode Javascript->

var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"

Pour ce type de problème, jquery est le plus simple à utiliser.

chandanjha
la source
21
L'affiche n'a jamais indiqué d'intérêt pour une solution jQuery. La méthode jQuery n'est pas non plus plus simple. Ne répondez pas à une question JS avec des solutions jQuery (sauf si la publication indique qu'elles le souhaitent). Cela confond simplement les gens qui essaient d'apprendre JS.
metaColin
6
getElementByClassName renvoie la collection de tous les éléments. Nous devons également mentionner l'indice de l'élément. var image = document.getElementsByClassName ("image2") [0]; image.src = "image1.jpg"
Tushar Gaurav
35

si vous utilisez la bibliothèque JQuery, utilisez cette instruction:

$("#imageID").attr('src', 'srcImage.jpg');
Alessandro Pirovano
la source
24
La question ne demande pas de réponse jQuery, n'inclut pas de balise jQuery ou ne suggère pas que vous pouvez utiliser jQuery.
Popnoodles
10
Dire aux gens d'utiliser jQuery lorsqu'une fonction équivalente est intégrée directement dans Javascript n'a aucun sens. Chaque question JS ne nécessite pas de réponse jQuery. Cette solution est un kludge qui empêche les gens d'apprendre ce que JS vanilla peut déjà faire.
metaColin
27

c'est bon maintenant

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }

    var edit_save = document.getElementById("edit-save");

       edit_save.src = "../template/save.png";                              
}
Jam Ville
la source
8 
<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />
Donatas Olsevičius
la source
Inline JS n'est pas exactement une excellente idée.
FluorescentGreen5
7

Dans ce cas, comme vous voulez changer la srcpremière valeur de votre élément, vous n'avez pas besoin de construire une fonction. Vous pouvez modifier ce droit dans l'élément:

<a href='#' onclick='this.firstChild.src="../template/save.png"')'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

Vous avez plusieurs façons de procéder. Vous pouvez également créer une fonction pour automatiser le processus:

function changeSrc(p, t) { /* where p: Parent, t: ToSource */
  p.firstChild.src = t
}

Ensuite vous pouvez:

<a href='#' onclick='changeSrc(this, "../template/save.png");'>
  <img src="../template/edit.png" id="edit-save"/>
</a>
Marcelo Camargo
la source
6

Avec l'extrait de code que vous avez fourni (et sans faire d'hypothèses sur les parents de l'élément), vous pouvez obtenir une référence à l'image avec

document.querySelector('img[name="edit-save"]');

et changer le src avec 

document.querySelector('img[name="edit-save"]').src = "..."

afin que vous puissiez obtenir l'effet souhaité avec 

var img = document.querySelector('img[name="edit-save"]');
img.onclick = function() {
    this.src = "..." // this is the reference to the image itself
};

sinon, comme d'autres l'ont suggéré, si vous contrôlez le code, il est préférable d'affecter un idà l'image avec une référence getElementById(car c'est la méthode la plus rapide pour récupérer un élément)

Fabrizio Calderan
la source
6

Donnez un identifiant à votre image. Ensuite, vous pouvez le faire dans votre javascript.

document.getElementById("blaah").src="blaah";

Vous pouvez utiliser la méthode ".___" pour modifier la valeur de n'importe quel attribut d'un élément.

Ben
la source