how to make background image random and keep changing?

**davelf** · 07-14-2010, 07:10 AM

Hi, thx for reading this

I have a script that can make the background keep changing without refreshing the page:

Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">
<!--

// (C) 2003 CodeLifter.com
// Free for all users, but leave in this  header

// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 3000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'img_1.jpg'
Pic[1] = 'img_2.jpg'
Pic[2] = 'img_3.jpg'
Pic[3] = 'img_4.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
   if (document.body){
   document.body.background = Pic[j];
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runBGSlideShow()', speed)
   }
}

//-->
</script>
</head>

<body onload="runBGSlideShow()">
</body>
</html>

and plus i need the background randomize?

cause i have another script that random the image background, but it change online if the page refresh.

Code:

<SCRIPT LANGUAGE="JavaScript">
random_onload= Math.floor(Math.random()* 9+1 );
// Loads the appropriate image and text color based on random number.
if (random_onload==1) {
image="images/bg1.jpg";
}
if (random_onload==2) {
image="images/bg2.jpg";
}
if (random_onload==3) {
image="images/bg3.jpg";
}
if (random_onload==4) {
image="images/bg4.jpg";
}
if (random_onload==5) {
image="images/bg5.jpg";
}
if (random_onload==6) {
image="images/bg6.jpg";
}
if (random_onload==7) {
image="images/bg7.jpg";
}
if (random_onload==8) {
image="images/bg8.jpg";
}
if (random_onload==9) {
image="images/bg9.jpg";
}

Thx in advanced

**coothead** · 07-14-2010, 08:20 AM

Hi there davelf,

here is an example for you to try...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/"><!--this is for coothead testing and can be removed-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>random background-image rotation</title>

<style type="text/css">
body {
    background-image:url(anim.gif);
</style>

<script type="text/javascript">

   var num;
   var temp=0;
   var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
   var preloads=[];

/* add any number of images here */

preload(
        'anim.gif',
        'anim1.gif',
        'anim2.gif',
        'anim3.gif',
        'anim4.gif',
        'anim5.gif'
       );

function preload(){

for(var c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
 }

function rotateImages() {
   num=Math.floor(Math.random()*preloads.length);
if(num==temp){
   rotateImages();
 }
else{
   document.body.style.backgroundImage='url('+preloads[num].src+')';
   temp=num;

setTimeout(function(){rotateImages()},speed);
  }
 }

if(window.addEventListener){
   window.addEventListener('load',function(){setTimeout(function(){rotateImages()},speed)},false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',function(){setTimeout(function(){rotateImages()},speed)});
  }
 }
</script>

</head>
<body>

<div>
</div>

</body>
</html>

coothead

**davelf** · 07-14-2010, 10:08 AM

sorry not working, have you try it?

**coothead** · 07-14-2010, 10:18 AM

Hi there davelf,

the code has been fully tested successfully in...

IE6
Firefox 3.6.6
Opera 10.6
Safari 5.33

...which suggests that it should work in the majority of browsers.

How did you test it?

coothead

**davelf** · 07-14-2010, 10:31 AM

1. i copy paste all of your script
2. change your image into my image such as this line of code:

Code:

<style type="text/css">
body {
    background-image:url(images/bg1.jpg);}
</style>

and

Code:

preload(
        'images/bg1.jpg',
        'images/bg2.jpg',
        'images/bg3.jpg',
        'images/bg4.jpg',
        'images/bg5.jpg',
        'images/bg6.jpg'
       );

that's it, and i don't see anything in my browser. Blank..?

May be i make a mistake, so how to make this working? Thx very much for your help.

**coothead** · 07-14-2010, 10:55 AM

Hi there davelf,

have you removed this...

...from the head section of the document?

If you havn't the script will be looking for your images on my server.

coothead

**davelf** · 07-14-2010, 11:04 AM

Aha, it's work now. Haha, that code the problem...

Ty very much

**coothead** · 07-14-2010, 11:05 AM

No problem, you're very welcome.

**davelf** · 07-14-2010, 11:09 AM

coothead, one more question

So the background image show at the first time is always the same, is there any script to make it random too?

**coothead** · 07-14-2010, 11:26 AM

Hi there davelf,

yes, of course, try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>random background-image rotation</title>

<style type="text/css">
body {

 }
</style>

<script type="text/javascript">

   var num;
   var temp=0;
   var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
   var preloads=[];

/* add any number of images here */

preload(
        'images/bg1.jpg',
        'images/bg2.jpg',
        'images/bg3.jpg',
        'images/bg4.jpg',
        'images/bg5.jpg',
        'images/bg6.jpg'
       );

function preload(){

for(var c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
 }

function rotateImages() {
   num=Math.floor(Math.random()*preloads.length);
if(num==temp){
   rotateImages();
 }
else {
   document.body.style.backgroundImage='url('+preloads[num].src+')';
   temp=num;

setTimeout(function(){rotateImages()},speed);
  }
 }

if(window.addEventListener){
   window.addEventListener('load',rotateImages,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',rotateImages);
  }
 }
</script>

</head>
<body>

<div>
</div>

</body>
</html>

Note:- you can "Copy & Paste" this code directly.

coothead