screen res affecting which img to display

[jslady]

On my homepage, I want to display a particular image when the screen resolution is 800 x 600 and a different image when the screen resolution is 1024 x 768.

I want to be able to call the script on every page in the site, in the body onLoad event, even though the only page which needs the script is the home page.
( This is because I'm using Dreamweaver templates and do not fully understand how i can call a javascript function on one page and not another when they are both created from the same template - I don't want to detach the homepage from the template because i want it to accept sitewide changes i might make in the future to the template style)

Is it possible to do what i want. What i have so far works fine on the homepage (because this page includes the original collagehome image), but it throws an error on other pages in the site.

function resizeCollagehome()
{
if (screen.availWidth == 800 )
{
document.images["collagehome"].src = "assets/images/collage_home.jpg" ;
}
}

What can i do? I've tried putting in another if statement for the location of the homepage, but this threw errors on the homepage and other pages.

any help would be greatly appreciated.

cheers.
jslady.

[Khalid Ali]

this may work

function resizeCollagehome(){
if(window.location.href=="http://mydomain.com/main.html"){
if (screen.availWidth == 800 ){
document.images["collagehome"].src = "assets/images/collage_home.jpg" ;
}
}
}

wher eyou compare that the url loaded in any given page is equal to the url of your main page,if not nothing will happen

[jslady]

Khalid,

Your solution worked. many thanks for your help.

I went wrong because i had been trying to use an assignment operator (=) instead of a comparison operator (==) in the if clause that identifies the specific page on which the function should work.

thanks again,

JsLady

[Khalid Ali]

:) ...you are welcome