Switching Background Images in Netscape with JavaScript...

Dev Shed Forums Sponsor:

June 13th, 2001, 01:00 PM

staiano

Junior Member

Join Date: Jun 2001

Location: New York, NY

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

Switching Background Images in Netscape with JavaScript...

Help...

I am trying to change the background image of a page in Netscape using JavaScript. Basically, I don't want the final background image to show until after the rest of the page has loaded which I am conrolling with DHTML. So I am looking to swap the image from a blank one to the final one at the appropriate time.

I am using document.body.background in my function in IE which works fine. Unfortunately I can't get a good answer on how to do it in Netscape. Everything I have been able to find says to use backgroundImage something like document.backgroundImage = "/images/background.gif" but this doesn't work. Also I have my JavaScript functions in an external file but that hasn't seemed to make a difference.

I know I can just stick the image in a layer and then I can show the layer whenever I want but I would prefer to keep it as a background. As I said, many place talk about being able to use styleObject.backgroundImage = url as Netscape discusses here or here but I can't get it to work in my JavaScript and since I am not doing anything else special except using a setTimeout('showImage()',1500) to call the showImage() function that will swap the background image I am at a loss.

function showImage() {
document.backgroundImage = "/images/background.gif";
}

Antonio
URL

Last edited by staiano : June 13th, 2001 at 02:06 PM.

June 13th, 2001, 07:18 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 15

The background image property isn't exposed in Navigator 4 (except through HTML). The references to style objects have to do with JSS (Javascript Style Sheets), which is just an alternative way of applying style rules before the document is rendered. Afterwards, you're principally limited, as you guessed, to Layer manipulation. Try this:

immediately after the <body> tag:

<layer id="BGLayer" width="100%" height="100%" pageX="0" pageY="0" z-index="1" visibility="hide">

call this on/after load:

function setDocBG(sImgSrc) {
if (document.layers && document.BGLayer) {
var BG = document.BGLayer;
var BG_width = (window.innerWidth>document.width) ? window.innerWidth : document.width;
var BG_height = (window.innerHeight>document.height) ? window.innerHeight : document.height;
BG.resizeTo(BG_width,BG_height);
BG.background.src = sImgSrc;
BG.visibility = 'show';
} else if (document.body) {
document.body.background = sImgSrc;
}
}

convenience function to alter BG:

function changeDocBG(sImgSrc) {
if (document.layers && document.BGLayer) {
document.BGLayer.background.src = sImgSrc;
} else if (document.body) {
document.body.background = sImgSrc;
}
}

Pass a null string to eliminate the image BG entirely (exposes the bg color).

hth, adios

Last edited by adios : June 20th, 2001 at 05:58 PM.

June 20th, 2001, 09:23 AM