web-dev-qa-db-fra.com

Changer par programme le src d'une balise img

Comment modifier l'attribut src d'une balise img à l'aide de 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 html onclick:

<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 ceci dans edit (), cela fonctionne mais il faut cliquer deux fois sur l'image

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }
javascripthtml5imagesrc
219
Jam Ville

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";                              
}
27
Jam Ville

Donnez à votre tag img un identifiant, alors vous pourrez

document.getElementById("imageid").src="../template/save.png";
285
Matthias

Vous pouvez utiliser les méthodes 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 simple à utiliser.

51
chandanjha

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

$("#imageID").attr('src', 'srcImage.jpg');
35
Alessandro Pirovano
<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />
8
Donatas Olsevičius

Dans ce cas, si vous souhaitez modifier la src de la première valeur de votre élément, vous n'avez pas besoin de créer une fonction. Vous pouvez changer 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 le faire. 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>
7
Marcelo Camargo

Avec l'extrait 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 le suggèrent, si vous maîtrisez le code, il est préférable d'affecter un id à l'image, obtenir une référence avec getElementById (puisqu'il s'agit de la méthode la plus rapide pour récupérer un élément).

6
fcalderan

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

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

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

5
Ben

Peut-être parce que vous avez une balise comme un parent de la balise. C'est pourquoi vous devez cliquer deux fois sur les images.

Pour moi, la solution est la suivante: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

4
Po Po