Javascript needed to rotate DIV class every 15 seconds

First, thank you Experts!  You all rock!  

Here is the situation:  I have a javascript that that changes the background image in a DIV by clicking a button, but I need an automated JS that randomly rotates the image through a list of predefined images without the involvement of the user.  I am using this as an example and I am willing to completely replace this model if someone has a better idea to randomly rotate the background image of a DIV without customer interaction.  :)

Here is the current code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<style type="text/css">
#div1 {
width:100px;
height:30px;
background-image:url(blue.gif);
}
</style>

<script language="javascript" type="text/javascript">
function changeDivImage()
{
    document.getElementById("div1").style.backgroundImage = "url(green.gif)";
}
</script>
</head>
<body>

test <br />

<div id="div1"></div>

<br />
<input type="button" value="Change Background Image" onclick="changeDivImage()" />

</body>
</html>
The_Big_TunaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lpxtechCommented:
Hi,

try the following code.
var divClasses = new array();
divClasses[1] = 'divClass';
divClasses[2] = 'divClass2';
divClasses[3] = 'divClass3';
 
var i = 1;
 
setInterval('rotateClasses', 15000);
 
function rotateClasses() {
  if (i == divClasses.length) {
    document.getElementById('divId').className = divClasses[i];
    i = 1;
  } else {
    document.getElementById('divId').className = divClasses[i];
    i++;
  }
}

Open in new window

0
hieloCommented:
try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#div1 { 
width:100px; 
height:30px; 
background-image:url(blue.gif); 
} 
</style> 
 
<script language="javascript" type="text/javascript"> 
//provide comma-separated list of images
var imageList="blue.gif,green.gif,red.gif";
 
var counter=0;
imageList=imageList.split(",");
function changeDivImage() 
{ 
	counter = ((++counter) % imageList.length);
    document.getElementById("div1").style.backgroundImage = "url("+imageList[counter]+")";
    setTimeout("changeDivImage()",1000*60*15);
} 
window.onload=changeDivImage;
</script> 
</head> 
<body> 
 
test <br />
 
<div id="div1"></div> 
 
</body> 
</html>

Open in new window

0
The_Big_TunaAuthor Commented:
Thanks...but:

lpxtech - how do I initiate the code?  Can you give me the complete HTML?  

hielo - I tried your code...but nothing happened.  

If you supply the complete HTML i wouldnt be able to mess it up.  :)
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

lpxtechCommented:
I did make a couple mistakes in my first code. Sorry, it was late.

Here is a full code example below. You can view the results at http://www.lpxtech.com/test.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Website</title>
<script type="text/javascript">
	var divClasses = new Array();
	divClasses[1] = 'divClass';
	divClasses[2] = 'divClass2';
	divClasses[3] = 'divClass3';
 
	var i = 1;
 
	setInterval('rotateClasses()', 15000);
 
	function rotateClasses() {
		if (i == divClasses.length) {
			document.getElementById('divId').className = divClasses[i];
			i = 1;
		} else {
			document.getElementById('divId').className = divClasses[i];
			i++;
		}
	}
</script>
<style type="text/css">
	.divClass {
		background: #000000;
		color: #ffffff;
	}
	.divClass2 {
		background: #0099CC;
		color: #000000;
	}
	.divClass3 {
		background: #CC6600;
		color: #ffffff;
	}
</style>
</head>
<body>
 
<div id="divId">
This is the div.
</div>
 
</body>
</html>

Open in new window

0
hieloCommented:
>>hielo - I tried your code...but nothing happened
Oops. I set it for 15 minutes not 15 secodnds. Here's the tested code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#div1 { 
width:500px; 
height:300px; 
background:transparent url(http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg) scroll no-repeat top left; 
} 
</style> 
 
<script language="javascript" type="text/javascript"> 
//provide comma-separated list of images
var imageList="http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg,http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg,http://www.cssnz.org/flower.jpg";
 
var counter=-1;
imageList=imageList.split(",");
function changeDivImage() 
{ 
	counter = ((++counter) % imageList.length);
    document.getElementById("div1").style.backgroundImage = "url("+imageList[counter]+")";
    setTimeout("changeDivImage()",1000*15);
} 
window.onload=changeDivImage;
</script> 
</head> 
<body> 
 
test <br />
 
<div id="div1"></div> 
 
</body> 
</html>

Open in new window

0
The_Big_TunaAuthor Commented:
lpxtech, I think you are right on target....except that it seems to give the next picture instead of a random picture in the list.  Is this possible?

0
lpxtechCommented:
Code below.

http://www.lpxtech.com/test.php - I dropped the timer to 1sec for testing. The code below is 15secs and working.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Website</title>
<script type="text/javascript">
	var divClasses = new Array();
	divClasses[0] = 'divClass';
	divClasses[1] = 'divClass2';
	divClasses[2] = 'divClass3';
	
	var i = 1;
 
	setInterval('rotateClasses()', 15000);
 
	function rotateClasses() {
		document.getElementById('divId').className = divClasses[i];
		i = Math.floor(Math.random()*divClasses.length);
	}
</script>
<style type="text/css">
	.divClass {
		background: #000000;
		color: #ffffff;
	}
	.divClass2 {
		background: #0099CC;
		color: #000000;
	}
	.divClass3 {
		background: #CC6600;
		color: #ffffff;
	}
</style>
</head>
<body>
 
<div id="divId">
This is the div.
</div>
 
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hieloCommented:
>>random picture in the list
try the attached code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#div1 { 
width:500px; 
height:300px; 
background:transparent url(http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg) scroll no-repeat top left; 
} 
</style> 
 
<script language="javascript" type="text/javascript"> 
//provide comma-separated list of images
var imageList="http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg,http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg,http://www.cssnz.org/flower.jpg";
imageList=imageList.split(",");
var prev=-1;
function changeDivImage() 
{
	do
	{
		var i=Math.floor(Math.random()*imageList.length);
	}while(prev==i);
	prev=i;
    document.getElementById("div1").style.backgroundImage = "url("+imageList[i ]+")";
    setTimeout("changeDivImage()",1000*15);
} 
window.onload=changeDivImage;
</script> 
</head> 
<body> 
 
test <br />
 
<div id="div1"></div> 
 
</body> 
</html>

Open in new window

0
lpxtechCommented:
Just remember if you want to change the amount of time, in the setInterval('rotateClasses()', 15000) function the 15000 is the amount of time between the interval in milliseconds. 1000=1sec and so on.

Hope this helps.
0
The_Big_TunaAuthor Commented:
(Sorry about the delay on getting back to you)
Excellent!  Each answer totally answers the question...but in very different ways.

Thank you so much!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.