Durga Dutt
Durga Dutt

Reputation: 4113

Adding image using javascript

I have a html page in which there is an image in anchor tag code is :

<a href="www.google.com" id="x"><img src="images/test.png" /></a>

on body onload event i am calling a javascript function which dynamically changes the image . My code is:

<script type="text/javascript">
function changeImage()
{
  document.getElementById('x').innerHTML= '<img src="images/test2.png" />'; 
}
</script>

This is working fine in firefox but not working in google chrome and ie. Please help..

Upvotes: 3

Views: 67007

Answers (3)

RobG
RobG

Reputation: 147403

As others have indicated, there are many ways to do this. The A element isn't an anchor, it's a link. And no one really uses XHTML on the web so get rid of the XML-style syntax.

If you don't have an id for the image, then consider:

function changeImage(id, src) {

  var image;
  var el = document.getElementById(id);

  if (el) {
    image = el.getElementsByTagName('img')[0];

    if (image) {
      image.src = src;
    }
  }
}

Then you can use an onload listener:

<body onload="changeImage('x', 'images/test.png');" ...>

or add a script element after the link (say just before the closing body tag) or use some other strategy for running the function after the image is in the document.

Upvotes: 0

Harry Joy
Harry Joy

Reputation: 59660

try this:

<a href="www.google.com" id="x"><img id="y" src="images/test.png" /></a>

in js

function changingImg(){
    document.getElementById("y").src="./images/test2.png"
}

Tested in Chrome and IE.


Then try this: [hoping that id of <a> is available and have at least one img tag]

var x = document.getElementById("x");
var imgs = x.getElementsByTagName("img");
imgs[0].src="./images/img02.jpg";

Upvotes: 4

Anil Namde
Anil Namde

Reputation: 6608

try following instead of changing innerHTML.

function changeImage()
{
  var parent = documeent.getElementById('x');
  parent.getElementsByTagName("img")[0].src = "newUrl";
}

Upvotes: 4

Related Questions