Change bg image based on res setting.....

Tazz

04-26-2004, 10:36 PM

Hello, I am trying to have my background image selected based on viewers resolution.

This is the code I found via the net. Is there something that needs modified so it works with other browsers? I have tested in IE6 (works) and NS7(doesn't work).

<Script Language="JavaScript">

var scrh = screen.Height
var scrw = screen.Width
if ( scrh == "768" && scrw == "1024" )
{
document.write("<body bgcolor='000000' background=themes/cmg/images/background.jpg>")
}
else
{
document.write("<body bgcolor='000000' background=themes/cmg/images/background5.jpg>")
}
</Script>

Mhtml

04-26-2004, 11:35 PM

Why not use document.body.background instead?

Tazz

04-27-2004, 12:45 AM

I am extremely new to javascript, how would I do that?

Tazz

04-27-2004, 05:56 AM

I was able to get it working with IE6 and Netscape7, just thought I would post what I used.

<Script Language="JavaScript">
bname=navigator.appName
if (bname.indexOf("Netscape")!=-1) {
scrw= window.innerWidth;
}
if (bname.indexOf("Microsoft")!=-1) {
scrw=screen.width
}

if ( scrw == "800" ) {
document.write("<body bgcolor='000000' background=background.jpg>")
}
else if ( scrw == "1024" ) {
document.write("<body bgcolor='000000' background=background1.jpg>")
}
else if ( scrw == "1152" ) {
document.write("<body bgcolor='000000' background=background2.jpg>")
}
else if ( scrw == "1280" ) {
document.write("<body bgcolor='000000' background=background3.jpg>")
}
else if ( scrw == "1600" ) {
document.write("<body bgcolor='000000' background=background4.jpg>")
}
else {
document.write("<body bgcolor='000000' background=background1.jpg>")
}
</Script>

Granted the code above only covers part of the resolution options that people use, I have a module on my site that tracks what visitors resolution settings are, I went with the most popular settings. Not sure if this will work with all the other browsers.

Mhtml

04-27-2004, 10:30 AM

What I suggested was to use like this --

if(whatever) {
document.body.background = 'yourimage.jpg';
}

It's cleaner, and probably works in all browsers (I'm not an expert on what works in what for js)..