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..
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";
try following instead of changing innerHTML.
function changeImage()
{
var parent = documeent.getElementById('x');
parent.getElementsByTagName("img")[0].src = "newUrl";
}
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.
<to theimgtag a typo or your actual code looks like this?