...
PDA

Table of rotating pictures HELP!

reggiefilho
12-20-2011, 04:20 PM
Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh.

i found this code that refreshes the pictures:

<script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);


img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>


and to come up with the tables i made this code:


<table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>


but if you see the home page here:

http://celulardepot.squarespace.com

you can see that something is DEFINITLY wrong :mad: lol
please help me! =D
vwphillips
12-20-2011, 04:44 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<table id="tst">
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" /></td>
</tr>
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" /></td>
</tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/

function Random(id){
var table=document.getElementById(id),imgs=table.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
for (;z0<imgs.length;z0++){
ary[z0]=imgs[z0].src;
}
ary=ary.shuffle(ary);
for (;z1<imgs.length;z1++){
imgs[z1].src=ary[z1];
}
}

Array.prototype.shuffle=function(ary){
for (var r,t,z0=0;z0<ary.length;z0++){
r=Math.floor(Math.random()*ary.length);
t=ary[z0];
ary[z0]=ary[r];
ary[r]=t;
}
return ary;
}


Random('tst')
/*]]>*/
</script>

</body>

</html>
reggiefilho
12-20-2011, 05:09 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<table id="tst">
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" /></td>
</tr>
<tr>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" /></td>
<td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" /></td>
</tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/

function Random(id){
var table=document.getElementById(id),imgs=table.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
for (;z0<imgs.length;z0++){
ary[z0]=imgs[z0].src;
}
ary=ary.shuffle(ary);
for (;z1<imgs.length;z1++){
imgs[z1].src=ary[z1];
}
}

Array.prototype.shuffle=function(ary){
for (var r,t,z0=0;z0<ary.length;z0++){
r=Math.floor(Math.random()*ary.length);
t=ary[z0];
ary[z0]=ary[r];
ary[r]=t;
}
return ary;
}


Random('tst')
/*]]>*/
</script>

</body>

</html>


Thank you very much for the quick reply!
I added your code and replaced my pictures and it worked for the 2 rows 3 columns perfectly!
But as soon as I changed it to 3 rows 4 columns it went downhill again :/

here's what i got now:

<table id="tst">
<tbody>
<tr>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" alt="" /></td>
</tr>
</tbody>
</table>
<p><script type="text/javascript">
/*<![CDATA[*/

function Random(id){
var table=document.getElementById(id),imgs=table.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
for (;z0<imgs.length;z0++){
ary[z0]=imgs[z0].src;
}
ary=ary.shuffle(ary);
for (;z1<imgs.length;z1++){
imgs[z1].src=ary[z1];
}
}

Array.prototype.shuffle=function(ary){
for (var r,t,z0=0;z0<ary.length;z0++){
r=Math.floor(Math.random()*ary.length);
t=ary[z0];
ary[z0]=ary[r];
ary[r]=t;
}
return ary;
}


Random('tst')
/*]]>*/
</script></p>


Thanks again for your help! I really appreciate it! God bless ;)



* EDIT

Wow, i refreshed the page and it worked.. Thank you!!!! You really saved me! Thanks again, God bless! =D
reggiefilho
12-20-2011, 05:27 PM
oh, one last thing.. is there a way i can set a specific width and height parameter? thank you!
vwphillips
12-21-2011, 09:17 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst IMG {
width:150px;height:150px;
}

/*]]>*/
</style></head>

<body bgcolor="red">
<table id="tst">
<tbody>
<tr>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" alt="" /></td>
<td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" alt="" /></td>
</tr>
</tbody>
</table>
<p><script type="text/javascript">
/*<![CDATA[*/

function Random(id){
var table=document.getElementById(id),imgs=table.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
for (;z0<imgs.length;z0++){
ary[z0]=imgs[z0].src;
}
ary=ary.shuffle(ary);
for (;z1<imgs.length;z1++){
imgs[z1].src=ary[z1];
}
}

Array.prototype.shuffle=function(ary){
for (var r,t,z0=0;z0<ary.length;z0++){
r=Math.floor(Math.random()*ary.length);
t=ary[z0];
ary[z0]=ary[r];
ary[r]=t;
}
return ary;
}


Random('tst')
/*]]>*/
</script></p>
</body>

</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum