Log in

View Full Version : Looking to auto change a table background image


designer_new
05-14-2010, 02:25 AM
I have 3 pictures that I want to rotate as a table background image. I figured out how to do it as an image, but I can't seem to make it work as a table background image... Any ideas? How can I call this in the table framework? <table width="528" border="2" cellspacing="4" cellpadding="0" align="center" background="1.jpg" height="362">

Auto Picture Code:



<script language="JavaScript">


var Rollpic1 = "1.jpg";
var Rollpic2 = "2.jpg";
var Rollpic3 = "3.jpg";

var PicNumber=1;

var NumberOfPictures=3;

var HowLongBetweenPic=5;


function SwitchPic(counter){

if(counter < HowLongBetweenPic){

counter++;


document.roll.src = eval("Rollpic" + PicNumber);


CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500);

}

else{

if(PicNumber < NumberOfPictures){
PicNumber++;
SwitchPic(0);
}
else{
PicNumber=1;
SwitchPic(0);
}

}

}
</script>


<body onload="SwitchPic(0)">

<img src="1.jpg" height="300" width="400" border="0" name="roll">
djr33
05-14-2010, 02:51 AM
You're using the .src property of the image, right?
So instead you want to use the .background property of the table.
At least that should work.
I believe that document. is not necessarily the best way to get everything-- use getElementById, I think.
But Javascript isn't really my area...
vwphillips
05-14-2010, 09:35 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>
<script type="text/javascript">
/*<![CDATA[*/
var ImgAry=['http://www.vicsjavascripts.org.uk/StdImages/One.gif','http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://www.vicsjavascripts.org.uk/StdImages/Three.gif'];
// preload the images
for (var img,z0=0;z0<ImgAry.length;z0++){
img=ImgAry[z0];
ImgAry[z0]=new Image();
ImgAry[z0].src=img;
}

var cnt=0,to=null;

function Rotate(){
cnt=++cnt%ImgAry.length;
document.getElementById('t1').style.backgroundImage='url('+ImgAry[cnt].src+')';
to=setTimeout(function(){ Rotate(); },2000);
}

/*]]>*/
</script></head>

<body onload="Rotate();">
<table id="t1" width="528" border="2" cellspacing="4" cellpadding="0" align="center" background="http://www.vicsjavascripts.org.uk/StdImages/One.gif" border="0" height="362">
<tr>
<td>text</td>
</tr>
</table>
</body>

</html>
designer_new
05-22-2010, 05:12 AM
That works great! Thanks for the help Vic.