How to change an image url by using js?

Question

<strong class="logo">
<a href="/">
<img width="254" height="236" src="/themes/musika/images/logo.png" alt="logo"></img>
<span>text</span>
</a>
</strong>

Need to change image url by javascript. The HTML code cannot be changed.

reference the element and set the src. What is your problem? — epascarello, Jun 06 '13 at 13:11
it is explained here: http://stackoverflow.com/questions/11722400/javascript-change-img-src — t.niese, Jun 06 '13 at 13:12

score 1 · Answer 1 · answered Jun 06 '13 at 13:15

The HTML code cannot be changed.

No need to assume this is "the first img in your page" or to "add the id tag". You could just iterate over all the img tags and search for the element to be modified.

var imgs = document.getElementsByTagName("img");
for(var x = 0; x<imgs.length; x++){

if (imgs[x].scr == "/themes/musika/images/logo.png")
imgs[x].scr = "YOUR NEW IMAGE HERE"

}

score 1 · Answer 2 · answered Jun 06 '13 at 13:32

if u can't change the code ... so u can't add id then

like already suggested

if the image is the first one

document.getElementsByTagName("img")[0].src="anotherimage.jpg";

function way

function changeimage(newimage){
document.getElementsByTagName("img")[0].src=newimage;
}
changeimage("anotherimage.jpg");

if u don't know if it's the first image then but u know the name then search it

var
imgs=document.getELementsByTagName('img'),
l=imgs.length;
while(l--){
 if(imgs[l].src=='/themes/musika/images/logo.png'){
  imgs[l].src='anotherimage.jpg';
 }
}

function

function changeimage(newimage){
    var
    imgs=document.getELementsByTagName('img'),
    l=imgs.length;
    while(l--){
     if(imgs[l].src=='/themes/musika/images/logo.png'){
      imgs[l].src=newimage;
     }
    }
}

changeimage('newimage.jpg');

score 0 · Answer 3 · answered Jun 06 '13 at 13:12

0

Assuming this is the FIRST image on the page:

document.getElementsByTagName("img")[0].src = "c:\temp\newimg.jpg";

Obviously, change c:\temp\newimg.jpg to what you need.

answered Jun 06 '13 at 13:12

tymeJV

103,943
14
161
157

score 0 · Answer 4 · answered Jun 06 '13 at 13:12

0

<img width="254" height="236" id="imageid" src="/themes/musika/images/logo.png" alt="logo"></img>



document.getElementById("imageid").src="image name";

answered Jun 06 '13 at 13:12

PSR

39,804
41
111
151

score 0 · Answer 5 · answered Jun 06 '13 at 13:15

0

Add an id to the tag : <img id="image1" width="254" height="236" src="/themes/musika/images/logo.png" alt="logo"> Then in the javascript use the following to point the new src.

document.getElementById("image1").src="path/newImg.png";

answered Jun 06 '13 at 13:15

happybuddha

1,271
2
20
40

score 0 · Answer 6 · answered Jun 06 '13 at 13:17

0

add a ID in you image tag

<img width="254" height="236"id="cng_img" src="/themes/musika/images/logo.png" alt="logo"></img>

Now you can change the image like below

var cngid = document.getElementById("cng_img");

cngid.src = "path/to/image.png";

answered Jun 06 '13 at 13:17

S. Rasel

2,841
1
16
12

How to change an image url by using js?

6 Answers6