Member Avatar for JimPatrick

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

  • 3 Contributors
  • 5 Replies
  • 264 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by JimPatrick
Member Avatar for itsjareds

Try this:

<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>
Member Avatar for JugglerDrummer

You're going to have something like this:

var srcs = {"images/pic1","images/pic2","images/pic3"};
var index= Math.floor ( Math.random() * 3 );
imagethingy.src = srcs[index];
Member Avatar for JimPatrick

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

Member Avatar for JimPatrick

Try this:

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

Member Avatar for JimPatrick

Thanks guys for your kindness, truly only by giving to we live. Thank u for sharing with me ur skills.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.