Background Swap - Random 2

When the page is unloaded a cookie is used to remember which array index number was selected.
If the same number is selected when the page is loaded again another number is selected, this helps prevent the same image being show twice in a row. The number is selected at random from the length of the array containing the images

The above example shows the background of a div changing when the page loads by referencing the div

document.getElementById("id").style.backgroundImage="imgArray("+[num]+")"

To change the background of the page you reference the body of the page

document.body.style.backgroundImage="imgArray("+[num]+")"

If you do not want to repeat the image or you want to position the image include the following in the script.

document.body.style.backgroundRepeat="no-repeat"

document.body.style.backgroundPosition="x y"

The following script example is set to change the background image of the page

<HTML>
<HEAD>
<TITLE>Background Swap - Random 2</TITLE>

<script type="text/javascript">

// Jeff
// www.huntingground.freeserve.co.uk

imgArray=new Array()
imgArray[0]="pic1.jpg"
imgArray[1]="pic2.jpg"
imgArray[2]="pic3.jpg"
imgArray[3]="pic4.jpg"
imgArray[4]="pic5.jpg"
imgArray[5]="pic6.jpg"
imgArray[6]="pic7.jpg"
imgArray[7]="pic8.jpg"
imgArray[8]="pic9.jpg"
imgArray[9]="pic10.jpg"

var preloadimgArray=new Array() // preloads images
for (i=0;i<imgArray.length;i++) {
preloadimgArray[i]=new Image()
preloadimgArray[i].src=imgArray[i]
}

expDays=365
cookieName="bgswap2"

function swapBg2(){
count = getCookie(cookieName)
num=Math.floor(Math.random()*imgArray.length)

if(num==count){
swapBg2()
}
else{
document.body.style.backgroundImage="url("+imgArray[num]+")"

//document.body.style.backgroundRepeat="no-repeat"
//document.body.style.backgroundPosition="center center"
}

}

function saveBg2(){
var exp = new Date()
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
setCookie(cookieName,num, exp)
}

function setCookie(name, value, expires, path, domain, secure){
if (!expires){expires = new Date()}
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure")
}

function getCookie(name){
var arg = name + "="
var alen = arg.length
var clen = document.cookie.length
var i = 0
while (i < clen) {
var j = i + alen
if (document.cookie.substring(i, j) == arg)
return getCookieVal(j)
i = document.cookie.indexOf(" ", i) + 1
if (i == 0) break
}
return null
}

function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset)
if (endstr == -1)
endstr = document.cookie.length
return unescape(document.cookie.substring(offset, endstr))
}

function deleteCookie(name,path,domain) { // An adaptation of Dorcht's function for deleting a cookie.
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-00 00:00:01 GMT"
}

// add onload="swapBg2()" onunload="saveBg2()" to the opening BODY tag

</script>

</HEAD>
<BODY onload="swapBg2()"  onunload="saveBg2()">
<h1><span>Background Swap - Random 2</span></h1>

</BODY>
</HTML>