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:

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

Code:

<!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.

Thread: Looking to auto change a table background image

Thread Tools

Search Thread

Looking to auto change a table background image

Thanks!

Bookmarks

Bookmarks

Posting Permissions