PDA

View Full Version : how to make background image random and keep changing?



davelf
07-14-2010, 08:10 AM
Hi, thx for reading this

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



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


<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, 09:20 AM
Hi there davelf,

here is an example for you to try...


<!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, 11:08 AM
sorry not working, have you try it?

coothead
07-14-2010, 11: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, 11:31 AM
1. i copy paste all of your script
2. change your image into my image such as this line of code:



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


and



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, 11:55 AM
Hi there davelf,

have you removed this...

<base href="http://www.coothead.co.uk/images/"><!--this is for coothead testing and can be removed-->
...from the head section of the document?

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

coothead

davelf
07-14-2010, 12:04 PM
Aha, it's work now. Haha, that code the problem...

Ty very much :D

coothead
07-14-2010, 12:05 PM
No problem, you're very welcome. ;)

davelf
07-14-2010, 12:09 PM
coothead, one more question:D

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, 12:26 PM
Hi there davelf,

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


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

davelf
07-15-2010, 03:21 AM
Wooo hoooo, this super Coothead, thx a bunch....:D

coothead
07-15-2010, 08:04 AM
Hi there davelf,

if you are fond of changing backgrounds you may like this old script...


<script type="text/javascript">

/* this value is editable */

var speed=50;

/**************************/

var r=255;
var g=255;
var b=255;

var flag=0;

var t=[];
var o=[];
var d=[];

function hex(p,q) {
t[p]=Math.floor(q/16);
o[p]=q%16;
switch (t[p]) {
case 10:t[p]='a';
break;
case 11:t[p]='b';
break;
case 12:t[p]='c';
break;
case 13:t[p]='d';
break;
case 14:t[p]='e';
break;
case 15:t[p]='f';
break;
default:break;
}
switch (o[p]) {
case 10:o[p]='a';
break;
case 11:o[p]='b';
break;
case 12:o[p]='c';
break;
case 13:o[p]='d';
break;
case 14:o[p]='e';
break;
case 15:o[p]='f';
break;
default:break;
}
}

function ran(p,q) {
if((Math.random()>2/3||q==0)&&q<255) {
q++;
d[p]=2;
}
else {
if((Math.random()<=1/2||q==255)&&q>0) {
q--;
d[p]=1;
}
else d[p]=0;
}
return q;
}

function do_it(p,q) {
if((d[p]==2&&q<255)||q==0){
q++;
d[p]=2;
}
else {
if((d[p]==1&&q>0)||q==255) {
q--;
d[p]=1;
}
}
if(p==3) {
if(d[1]==0&&d[2]==0&&d[3]==0)
flag=1;
}
return q;
}

function bgcol() {
if(flag==0) {
r=ran(1,r);
g=ran(2,g);
b=ran(3,b);
hex(1,r);
hex(2,g);
hex(3,b);
document.body.style.backgroundColor="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3];
flag=50;
}
else {
r=do_it(1,r);
g=do_it(2,g);
b=do_it(3,b);
hex(1,r);
hex(2,g);
hex(3,b);
document.body.style.backgroundColor="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3];
flag--;
}
setTimeout(function(){bgcol()},speed)
}
if(window.addEventListener){
window.addEventListener('load',bgcol,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',bgcol);
}
}
</script>

coothead

Rezna
03-25-2012, 03:41 AM
Sorry to bump such an old thread I have been searching for quite some time for something to do what I need it to on my website. This is the first I've found that is loading the images randomly on a duration rather than on each page refresh.

This is a great script, is there a way to change it so that it loads all images in order in a certain file instead of having to use their exact names? What if someone had like 100 images on their server? That would take forever to plug in that many names.

Mine is more that each file has a different name than bg1,2,3 etc. So I was just wondering if it could search and assign each image as part of the array, then start loading randomly selected images.

I believe digging up this post from so long ago will be helpful to more than just me.

"Sorry to bump such an old thread I have been searching for quite some time for something to do what I need it to on my website. This is the first I've found that is loading the images randomly on a duration rather than on each page refresh.

This is a great script, is there a way to change it so that it loads all images in order in a certain file instead of having to use their exact names? What if someone had like 100 images on their server? That would take forever to plug in that many names.

Mine is more that each file has a different name than bg1,2,3 etc. So I was just wondering if it could search and assign each image as part of the array, then start loading randomly selected images. "

lanc3lot
06-18-2014, 03:37 PM
Great post, even after so many years!

It will be nice, if we could add to the code, a way to change backgrounds with an effect, lets say fade off