AJAX

Random Background Image Script

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2009

Posts: 6

Reputation: JimPatrick is an unknown quantity at this point

Solved Threads: 0

JimPatrick JimPatrick is offline

Offline

Newbie Poster

Random Background Image Script

May 26th, 2009

Hi I am looking for a random background image script. I have 3 background images that cover the whole browser and I want them to rotate when someone hits the refresh button on the browser. Can anyone help me on this thanks.
JimPatrick

•

Join Date: May 2009

Posts: 97

Reputation: itsjareds is an unknown quantity at this point

Solved Threads: 12

itsjareds

Offline

Junior Poster in Training

Re: Random Background Image Script

May 26th, 2009

Try this:

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<html>
<head>
 
<script type="text/javascript">
function randomize(min, max) {
	if (!min)
		min = 0;
	if (!max)
		max = 1;
	return Math.floor(Math.random()*(max+1)+min);
}
function randomBg() {
	var bgs = new Array();
 
	// I took these images from a site with a similar script already only to get example images
	// I wrote this script myself
	bgs.push("http://javascript.internet.com/img/backgrounds/wood.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/paper.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/clouds.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/faces.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/marble.gif");
 
	document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")";
}
</script>
 
</head>
<body onLoad="randomBg()" style="text-align:center;">
 
<span style="font-size:1.5em; background-color:white; border:1px dashed black; padding:5px;">A random background image should appear!</span>
 
</body>
</html>
<html>
<head>

<script type="text/javascript">
function randomize(min, max) {
	if (!min)
		min = 0;
	if (!max)
		max = 1;
	return Math.floor(Math.random()*(max+1)+min);
}
function randomBg() {
	var bgs = new Array();

	// I took these images from a site with a similar script already only to get example images
	// I wrote this script myself
	bgs.push("http://javascript.internet.com/img/backgrounds/wood.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/paper.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/clouds.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/faces.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/marble.gif");

	document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")";
}
</script>

</head>
<body onLoad="randomBg()" style="text-align:center;">

<span style="font-size:1.5em; background-color:white; border:1px dashed black; padding:5px;">A random background image should appear!</span>

</body>
</html>

Last edited by itsjareds; May 26th, 2009 at 10:23 pm.

Mark your post as Solved if you've been helped!

I learn by helping others learn.
If you find one of my posts helpful, don't be afraid to give me a reputation bump :D

•

Join Date: Apr 2009

Posts: 119

Reputation: JugglerDrummer is an unknown quantity at this point

Solved Threads: 15

JugglerDrummer JugglerDrummer is offline

Offline

Junior Poster

Re: Random Background Image Script

May 26th, 2009

You're going to have something like this:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var srcs = {"images/pic1","images/pic2","images/pic3"};
var index= Math.floor ( Math.random() * 3 );
imagethingy.src = srcs[index];
var srcs = {"images/pic1","images/pic2","images/pic3"};
var index= Math.floor ( Math.random() * 3 );
imagethingy.src = srcs[index];

92% of all statistics are made up on the spot.

If you found a post helpful, please click the "give XXX reputation" link, to show your appreciation to those who helped you. Thanks! :D

•

Join Date: May 2009

Posts: 6

Reputation: JimPatrick is an unknown quantity at this point

Solved Threads: 0

JimPatrick JimPatrick is offline

Offline

Newbie Poster

Re: Random Background Image Script

May 26th, 2009

Thanks mate I am just testing your script right now and how I can implement it on my site right now thanks will keep u posted if I need further help.
JimPatrick

•

Join Date: May 2009

Posts: 6

Reputation: JimPatrick is an unknown quantity at this point

Solved Threads: 0

JimPatrick JimPatrick is offline

Offline

Newbie Poster

Re: Random Background Image Script

May 26th, 2009

•

Originally Posted by itsjareds

Try this:
Help with Code Tags

HTML Syntax (Toggle Plain Text)
<html>
<head>
 
<script type="text/javascript">
function randomize(min, max) {
	if (!min)
		min = 0;
	if (!max)
		max = 1;
	return Math.floor(Math.random()*(max+1)+min);
}
function randomBg() {
	var bgs = new Array();
 
	// I took these images from a site with a similar script already only to get example images
	// I wrote this script myself
	bgs.push("http://javascript.internet.com/img/backgrounds/wood.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/paper.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/clouds.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/faces.gif");
	bgs.push("http://javascript.internet.com/img/backgrounds/marble.gif");
 
	document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")";
}
</script>
 
</head>
<body onLoad="randomBg()" style="text-align:center;">
 
<span style="font-size:1.5em; background-color:white; border:1px dashed black; padding:5px;">A random background image should appear!</span>
 
</body>
</html>
<html> <head> <script type="text/javascript"> function randomize(min, max) { if (!min) min = 0; if (!max) max = 1; return Math.floor(Math.random()*(max+1)+min); } function randomBg() { var bgs = new Array(); // I took these images from a site with a similar script already only to get example images // I wrote this script myself bgs.push("http://javascript.internet.com/img/backgrounds/wood.gif"); bgs.push("http://javascript.internet.com/img/backgrounds/paper.gif"); bgs.push("http://javascript.internet.com/img/backgrounds/clouds.gif"); bgs.push("http://javascript.internet.com/img/backgrounds/faces.gif"); bgs.push("http://javascript.internet.com/img/backgrounds/marble.gif"); document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")"; } </script> </head> <body onLoad="randomBg()" style="text-align:center;"> <span style="font-size:1.5em; background-color:white; border:1px dashed black; padding:5px;">A random background image should appear!</span> </body> </html>

itsjareds - thank you so much I have manage to fix it now its working wonders mate. Much appreciated.