PDA

Click to See Complete Forum and Search --> : loop, layer and images......

leechun
05-16-2003, 05:20 PM
hello people:

i have been trying to create layers(<div> tag) using for loop so that i can generate many of them and manipulate them as well. however, i have entountered some question. if i put a image in each layer like this:

document.write('<img id = "sec_img'+index+' ">');

or

document.write('<img id = "eval("sec_img" + index )" >');

where var index is the loop control.

doesn't this mean that i can then alter aspects of the imgs using soemthing like

sec_img0.width = somevalue
sec_img1.width = somevalue
.
.
.(eventually using a loop to alter them as well...)

if yes, i can't seems to get it to work. maybe its the syntax that i have got it wrong, can anyone help?

many thanks!!!!
CHUN
khalidali63
05-16-2003, 05:27 PM
I think by not using document.write you should be able reduce most of your headaches..use document.getELementById.innerHTML if you have to,the best solution will be to use dome methods
document.createElement("img") and then append it to the corresponding div.
khalidali63
05-16-2003, 05:31 PM
I might have not understood the quest,I am prety sure once an image is rendered if we have a reference to it,its width and height attributes can be changed..
EDIT
I have used the same technique here.image is loaded once and its size is changed on the fly.
http://68.145.35.86/skills/javascripts/ImageExpander.html
khalidali63
05-16-2003, 05:42 PM
Yes I have tested it with all 3 browsers
NS6+,IE6+,Opera7+
leechun
05-16-2003, 05:45 PM
thanks for your help, i think it might help if i give you guys more detail on my code, it looks something like this

<head>
<script type = "javascript">

var num_of_row = 2;
var num_of_coll = 2;
var index;


/* creats layers and put a image in each layer*/
for(j=0; j<num_of_row; j++)
{
for(i=0; i<num_of_coll; i++)
{
document.write('<div id = "sec'+i+' " style = "position:absolute; top: '+ ((winHeight()/num_of_row * j) + (winHeight()*0.05)) +' px;left:'+((winWidth()/num_of_coll * i) + (winWidth()*0.05)) +' px">');


document.write('<img id = "sec_img'+index+' " src = "images/zero+.gif " width = " '+winWidth()/num_of_row*0.8+' " height = " '+winHeight()/num_of_coll*0.8+' ">');


document.write('</div>');
index++;
}

}

function resize()
{
/*well, i would like to manipulate the size of the image using for loop here*/

for(i=0; i<index; i++)
{
/*question! what do i do here? */
}
}

</script>

</head>

thanks very much for your input, i am not quite familiar with document.getELementById.innerHTML method, i will look into that later

many thanks...

CHUN