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
JimPatrick
0
Newbie Poster
Recommended Answers
Jump to PostTry 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 …
Jump to PostYou'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];
All 5 Replies
itsjareds
29
Junior Poster
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>
JugglerDrummer
0
Junior Poster
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];
JimPatrick
0
Newbie Poster
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
JimPatrick
0
Newbie Poster
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.
JimPatrick
0
Newbie Poster
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.