it-swarm.com.de

Ändern Sie programmgesteuert den Quellcode eines img-Tags

Wie kann ich das src Attribut eines img Tags mit Javascript ändern?

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

zuerst habe ich eine Standard-src, die "../template/edit.png" ist und ich wollte sie mit "../template/save.png" onclick ändern.

AKTUALISIERT: hier ist mein HTML-Klick:

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

und mein JS

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

Ich habe versucht, dies in edit () einzufügen. Es funktioniert, aber ich muss zweimal auf das Bild klicken

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

jetzt ist es ok

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

Geben Sie Ihrem img-Tag eine ID, dann können Sie

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

Sie können sowohl jquery als auch javascript verwenden: Wenn Sie zum Beispiel zwei Bilder haben:

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

1) Abfragemethode->

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

2) Javascript-Methode->

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

Für diese Art von Problemen ist jquery die einfach zu verwendende.

51
chandanjha

wenn Sie die JQuery-Bibliothek verwenden, verwenden Sie diese Anweisung:

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

In diesem Fall müssen Sie keine Funktion aufbauen, da Sie src des ersten Werts Ihres Elements ändern möchten. Sie können dies direkt im Element ändern:

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

Sie haben mehrere Möglichkeiten, dies zu tun. Sie können auch eine Funktion erstellen, um den Prozess zu automatisieren:

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

Dann kannst du:

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

Mit dem von Ihnen bereitgestellten Snippet (und ohne Annahmen über die Eltern des Elements) können Sie einen Verweis auf das Bild mit erhalten

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

und ändere den src mit

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

so konnte man mit den gewünschten effekt erzielen

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

andernfalls ist es besser, wenn Sie die Kontrolle über den Code haben, dem Bild ein id zuzuweisen und eine Referenz mit getElementById abzurufen (da dies die schnellste Methode zum Abrufen eines Elements ist).

6
fcalderan

Geben Sie Ihrem Bild eine ID. Dann können Sie dies in Ihrem Javascript tun.

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

Sie können die Methode ".___" verwenden, um den Wert eines beliebigen Attributs eines beliebigen Elements zu ändern.

5
Ben

Vielleicht, weil Sie ein Tag haben, wie ein Elternteil des Tags. Deshalb muss man die Bilder zweimal anklicken.

Für mich lautet die Lösung wie folgt: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

4
Po Po