İmg etiketinin src'sini programlı olarak değiştirme

Javascript kullanarak srcbir imgetiketin niteliğini nasıl değiştirebilirim ?

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

ilk başta "../template/edit.png" olan bir varsayılan src var ve "../template/save.png" onclick ile değiştirmek istedim.

GÜNCELLENDİ: İşte benim html onclick:

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

ve JS'm

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

Bunu edit () içine eklemeyi denedim, işe yarıyor ama görüntüyü iki kez tıklamanız gerekiyor

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

İmg etiketinize bir kimlik verin, ardından

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

Hem jquery hem de javascript yöntemini kullanabilirsiniz: örneğin iki görüntünüz varsa:

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

1) Jquery Yöntemi->

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

2) Javascript Yöntemi->

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

Bu tür bir sorun için jquery kullanımı basit olanıdır.

JQuery kitaplığını kullanıyorsanız bu talimatları kullanın:

$("#imageID").attr('src', 'srcImage.jpg');

şimdi tamamdır

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";                              
}

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

Bu durumda, srcöğenizin ilk değerini değiştirmek istediğinizde , bir işlev oluşturmanıza gerek yoktur. Bunu, öğede değiştirebilirsiniz:

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

Bunu yapmanın birkaç yolu var. İşlemi otomatikleştirmek için bir işlev de oluşturabilirsiniz:

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

O zaman yapabilirsin:

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

Sağladığınız snippet ile (ve öğenin ebeveynleri hakkında varsayımlarda bulunmadan) ile görüntüye referans alabilirsiniz.

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

ve src'yi

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

böylece istediğiniz efekti elde edebilirsiniz

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

aksi takdirde, diğer önerildiği gibi, kodu kontrol ediyorsanız id, resme bir referans almak için bir görüntü atamak daha iyidir getElementById(çünkü bir öğeyi almak için en hızlı yöntemdir)

Resminize bir kimlik verin. Sonra bunu javascript'inizde yapabilirsiniz.

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

Herhangi bir öğenin herhangi bir özelliğinin değerini değiştirmek için ".___" yöntemini kullanabilirsiniz.

Belki de etiketin üst öğesi gibi bir etiketiniz olduğu için. Bu yüzden görüntüleri iki kez tıklamanız gerekiyor.

Benim için çözüm şu: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb