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?
 
lpxtechConnect With a Mentor Commented:
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
 
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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
 
hieloConnect With a Mentor Commented:
>>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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.