cant get javascript document.write images to be under other content

[stilsen]

this is sort of a javascript/html/css question:

im using a javascript to randomly position many small images on the page,
and i want them to be in the background relative to other content on the page. for example, the command below is run a bunch of times in a javascript in my header, which i call from the body:

document.write('<img src="./images/' + img_rnd[i] + '" style="z-index: 1; position: absolute; left:' + x[i] + '; top: ' + y[i] + '; width: ' + img_width + '; height: ' + img_height + ';"></img>');

despite setting z-indexes to 2 for my divs/layrs/tables in the body, i cant get them to overlap the images positioned by the document.write call.

is there a better/different way to get these images to be "in the background"?

thanks,
sam

[Kor]

In my oppinion you should have used DOM methods to create the elements and their attributes, not the obsolate document.write() method

[stilsen]

so what your saying is use statements like??

document.images[i].src="./images/" + img_rnd[i];
document.images[i].height=img_width;
document.images[i].width=img_height;

can i use the DOM to position, resize, and layer the images
behind other content?

[Kor]

Could be something like this:

//inside your i loop
...
var root=document.getElementById('mydiv'+i);//the node where to append the image
var pic=document.createElement('img');
var att=[
['width',img_width],['height',img_height],['src','./images/'+img_rnd[i]]
]
for(var j=0;j<att.length;j++){
pic.setAttribute(att[j][0],att[j][1]);
}
var css=[
['position','absolute'],['zIndex',1],['left',x[i]+'px'],['top',y[i]+'px']
]
for(var j=0;j<css.length;j++){
pic.style[css[j][0],css[j][1]];
}
...
root.appendChild(pic);