#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    New York, NY
    Posts
    2
    Rep Power
    0

    Question 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
    astaiano@lds.com
    Last edited by staiano; June 13th, 2001 at 02:06 PM.
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    New York, NY
    Posts
    2
    Rep Power
    0
    Thanks a lot. I ended up doing it in a layer for Nestscape, very similar to what
    you said. Netscape can be so frustrating some times...

    Thanks Again,
    Ant

IMN logo majestic logo threadwatch logo seochat tools logo