ELias Rahme ELias Rahme - 4 months ago 10
HTML Question

How to load several images in the same place

I have created an html document that uses javascript to connect to xml and get the name of a picture to load using this CSS :

#container {
width:800px;
}
#left {
top:10%;
position: relative;
float: left;
width:200px;
left:30px;
}
#right {
position:absolute;
top: 0px;
right: 300px;
z-index:-1;
}


And this code:

var TestP = new Array();

function loadImg(n){

TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
alert(TestP[n]);
img.src = TestP[n];


alert(n);
alert(TestP[n]);
document.getElementById('right').appendChild(img);


A part of the HTML :

<li><a href="#" onClick="loadImg(1)">Part 1</a></li>


The thing is when I first click on the link, everything works well, but when I click another time, I will get two images, each at a different position. I want to have the second image take the exact same place, beeing on top of the first one.

Answer
elem = document.getElementById( 'right' );
child = elem.firstChild;
if ( child )
  elem.replaceChild( img, child );
else
  elem.appendChild( img );
Comments