Detecting resolutions and changing body Slideshow BG

[kerneLithium]

Hello

I've recently made this JS using functions (it's all external .js files called using sepperate <script> tags), that was intended to change the body BG image over a certain interval of time. I've called the function 'BIGSlide1' in the body tag with an "onload" event and it worked.

This is the JS:



// Define the time interval between images
var speed = 5000;

function BIGSlide1() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide1.jpg)";
var t=setTimeout("BIGSlide2()",speed);
}

function BIGSlide2() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide2.jpg)";
var t=setTimeout("BIGSlide3()",speed);
}

function BIGSlide3() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide3.jpg)";
var t=setTimeout("BIGSlide4()",speed);
}

function BIGSlide4() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide4.jpg)";
var t=setTimeout("BIGSlide5()",speed);
}

function BIGSlide5() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide5.jpg)";
var t=setTimeout("BIGSlide1()",speed);
}

But when I modified the script (bellow) so that it recognizes the user's screen resolution (as the BG images appeared too big for '1024x768' and did not shrink accordingly), and called the function 'changeBodyBG' the same way as before, it did not work. No background was shown whatsoever.



// Define the time interval between images
var speed = 5000;


function changeBodyBG() {

if ((screen.width>=1280) && (screen.height>=1024))

{
BIGSlide1();
}

else

{
Slide1();
}

function BIGSlide1() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide1.jpg)";
var t=setTimeout("BIGSlide2()",speed);
}

function BIGSlide2() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide2.jpg)";
var t=setTimeout("BIGSlide3()",speed);
}

function BIGSlide3() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide3.jpg)";
var t=setTimeout("BIGSlide4()",speed);
}

function BIGSlide4() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide4.jpg)";
var t=setTimeout("BIGSlide5()",speed);
}

function BIGSlide5() {
document.body.style.backgroundImage = "url(img/bgr_slides/1280x1024/slide5.jpg)";
var t=setTimeout("BIGSlide1()",speed);
}



function Slide1() {
document.body.style.backgroundImage = "url(img/bgr_slides/1024x768/slide1.jpg)";
var t=setTimeout("Slide2()",5000);
}

function Slide2() {
document.body.style.backgroundImage = "url(img/bgr_slides/1024x768/slide2.jpg)";
var t=setTimeout("Slide3()",5000);
}

function Slide3() {
document.body.style.backgroundImage = "url(img/bgr_slides/1024x768/slide3.jpg)";
var t=setTimeout("Slide4()",5000);
}

function Slide4() {
document.body.style.backgroundImage = "url(img/bgr_slides/1024x768/slide4.jpg)";
var t=setTimeout("Slide5()",5000);
}

function Slide5() {
document.body.style.backgroundImage = "url(img/bgr_slides/1024x768/slide5.jpg)";
var t=setTimeout("Slide1()",5000);
}

}


Can someone please point me to the source of my problem? The different sized images are in two directories, respectively '1280x1024' and '1024x768', as i am sure a directory misscall is not the issue.

EDIT: If you don't have any ideas on this, please give me your 2 cents on what you think must be done. I would appreciate that. I'm beginning to think this whole script is flawed and won't work whatever i do, so if you know a better way of achieving the same result, please let me know. Thanks.