If you’ve known of Hencogroup for a while now, you may remember that our old website had all sorts of cool stuff like expand/collapseable sections, and a theme changer.
This theme changer basically Calls an image from a directory and sets it as the desktop Background, then saves the image you rotated to in a cookie so that it remembers your selection. Pretty cool huh?
Well, I didn’t make this script but seeing as it was only sitting in a forum somewhere last time I looked, I decided to spread the word, and give people an idea of how to use it.
First of all let’s go to our <head> tags – in here somewhere, probably just before </head>, you will need the following script:
<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>
Long, I know, but it works a treat once fully set up….
Now we need to edit the <body> tag – this needs to be changed from <body> into <body background=photo1.jpg>
This can be changed accordingly to the photo you want displayed initially, or to new site visitors.
Finally, somewhere on your page you need to add the button which is what visitors click to change the background image – use this code:
<input type=button value=”Change Background Image” onClick=”bgChange()”>
That’s it! Enjoy your new background switching site!
Recent Comments