Click to See Complete Forum and Search --> : Help with Background Image Selector Script


Calman
02-19-2009, 03:19 AM
Hey Guys!

I picked this script up a while back & love how it functions. I am looking to use it again on a new project, only I would like all the backgrounds to fit the screen to accomodate various resolutions. Now I know in common HTML, it would be a simple case of adding "Width=100%" or "Height=100%" ... I just don't know the best placement in this script, so any help very welcomed.

---------------------------------------------------------------------


<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=30

//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]="http://www.*/1.gif"
backgs[1]="http://www.*/2.gif"
backgs[2]="http://www.*/3.gif"
backgs[3]="http://www.*/4.gif"

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


---------------------------------------------------------------------

I'm thinking the area I highlighted in red may be where I am needing to implement a width command for all selected images?

Many thanks in advance! :)
Cal

Fang
02-19-2009, 04:03 AM
You can't change the size of the background image, you will need a positioned image.

Calman
02-19-2009, 04:08 AM
.. could you explain further?

Thanks! :)

Fang
02-19-2009, 04:37 AM
http://www.cssplay.co.uk/layouts/background

Calman
02-19-2009, 04:48 AM
.. thank you so much!

I'll go and dabble with the code on this.

Cal :)

Calman
02-19-2009, 05:13 AM
Okay, it works well on it's own steam ... but I reckon this makes my Image Selector script defunct?

If I could get an Image Selector which centers all images at least, that would be a good starting point. How I wish everyone ran the same resolution!

Cal :)