web-gelistirme-sc.com

Bir img etiketinin kaynağını programlı olarak değiştirme

Javascript kullanarak bir src etiketinin img niteliğini nasıl değiştirebilirim?

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

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

GÜNCELLEME: İşte benim html onclick:

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

ve benim JS

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ıklatmanız gerekiyor

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

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

İmg etiketine bir kimlik ver, sonra yapabilirsin

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

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.

48
chandanjha

jQuery kütüphanesini kullanıyorsanız bu talimatı kullanın:

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

Bu durumda, elementinizin ilk değerinin src'sini değiştirmek istediğinizde, bir fonksiyon oluşturmanıza gerek kalmaz. Bu hakkı öğ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>
7
Marcelo Camargo

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

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

ve src ile değiştir

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ğerinin önerdiği gibi, eğer kodun kontrolü sizde ise, id ile bir referans almak için getElementById ile bir referans almak daha iyidir (çünkü bir elemanı almak için en hızlı yöntemdir)

6
fcalderan

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

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

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

5
Ben

Belki de etiketin ebeveyni gibi bir etiketiniz olduğundan. Bu yüzden görüntülere iki kez tıklamanız gerekiyor.

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

4
Po Po