OK, it was working fine in IE but when I loaded it up in FF, I saw some very odd behaviors. I've updated, consolidated and improved the script. It now goes entirely in the head and can handle initial backgrounds set with either style or with HTML. Expiration date is configurable and optional. I've eliminated the Config option as it was confusing. When configuring the script (as with all cookie scripts), exit the page and with the browser open to a different page, use the browser's delete cookies button to clear all cookies, then exit all instances of the browser. Now you can make whatever changes you want to the page, then launch it to check your work.
Code:
<script type="text/javascript">
/*Background Change Script w/cookie persistence
© 2006 John Davenport Scheuer (jscheuer1)
this credit must remain for legal use
visit Dynamic Drive Help Forums (http://www.dynamicdrive.com/forums/) */
//Set expiration in days, use 0 for session only cookie
var exp=20
//Set Background Images Array, use at least two Images.
//Do NOT use =, +, -, or spaces in path or filenames.
//For best results, set body's background to the first entry
var backgs=new Array
backgs[0]="photo1.jpg"
backgs[1]="photo2.jpg"
backgs[2]="photo3.jpg"
/////////No Editing Needed for rest of Script////////
function bgChange(){
if (backgs.length>2)
backgs.push([backgs.shift()])
for (i = 0; i < backgs.length; i++)
if (document.body.background!==backgs[i]||document.body.style.backgroundImage.toLowerCase()!=='url('+backgs[i].toLowerCase()+')'){
document.body.style.backgroundImage='url('+backgs[i]+')'
break
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
var acookiename="abgchange"
var acookievalue=get_cookie(acookiename)
if (acookievalue!=""){
backgs=eval(acookievalue)
document.body.style.backgroundImage='url('+backgs[0]+')'
}
}
function saveBgrnd(){
var abackgs='["'
for (i = 0; i < backgs.length; i++)
abackgs+=backgs[i]+'","'
abackgs=abackgs.substr(0,abackgs.length-2)+']'
var acookiename="abgchange"
var date = new Date();
date.setTime(date.getTime()+(exp*24*60*60*1000));
var expires = exp? "; expires="+date.toGMTString() : ""
var acookievalue=abackgs+expires+"; path=/"
document.cookie=acookiename+"="+acookievalue
}
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", onloadfunction, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", onloadfunction );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
onloadfunction();
};
}
else
window.onload = onloadfunction;
}
window.onunload=saveBgrnd
</script>
You can still use this:
HTML Code:
<input type=button value="Change Background Image" onClick="bgChange()">
or variations of it, in the body to allow users to page through the available backgrounds.
Changing background image script
Originally Posted by ulrich
Bookmarks