JavaScript Tip of the Week for September 23, 1996: Saving Space on Your Site | 3

JavaScript Tip of the Weekfor September 23, 1996: A JavaScript Billboard

Take image replacement, a link, and three arrays; what do you get? A JavaScript Billboard. This little app saves space while being useful and fun to look at. This one displays one of three images, and if you click on the image that it is displaying it will bring you to a related link. There are two parts to this billboard: the transition and the lull time. During the transition phase the billboard displays a series of images that form an animation. That's the downward sweeping that you see between images. During lull time, an image is displayed and you can click on that image to go to its link. To start out, you need to define four variables: 
    
    var boardNum = 0;
    var transNum = 0;
    var boardSpeed = 2000;
    var transSpeed = 150;
The two most important variables are boardSpeed and transSpeed. The former determines how long the billboard should display an image before in goes to the next one. The latter determines how fast each frame of the transition animation should be played. Both are measured in milliseconds. Next, all of the billboard's main images should be preloaded in the form of arrays [see Image Object]: 
    billboard = new Array;
    billboard[0] = new Image(31, 250);
    billboard[0].src = "/this_week.gif";
    billboard[1] = new Image(31, 250);
    billboard[1].src = "/archive.gif";    
    billboard[2] = new Image(31, 250);
    billboard[2].src = "/bguide.gif";
You can use any number of images you want, but for the sake of bandwidth I only used three. Now that you have preloaded your images, you need to specify where you want them to link to: 
    url = new Array;
    url[0] = "/this_week/index.html";
    url[1] = "/tip_week_past.html";
    url[2] = "/guide/index.html";
Each of these urls correspond to the images in the billboard array. e.g."/this_week.gif" links to "/this_week/index.html". Now comes the fun part; the transition images. These can be anything you want, but I suggest that you make them into an animation. You could have the billboard swipe across or perhaps shatter to pieces. The possibilites are endless, so are the number of frames you can use. The one I created has only seven though: 
    trans = new Array;    
    trans[0] = new Image(31, 250);
    trans[0].src = "trans0.gif";
    trans[1] = new Image(31, 250);
    trans[1].src = "trans1.gif";
    trans[2] = new Image(31, 250);
    trans[2].src = "trans2.gif";
    trans[3] = new Image(31, 250);
    trans[3].src = "trans3.gif";
    trans[4] = new Image(31, 250);
    trans[4].src = "trans4.gif";
    trans[5] = new Image(31, 250);
    trans[5].src = "trans5.gif";
    trans[6] = new Image(31, 250);
    trans[6].src = "trans6.gif";
Just include the filenames in place of "transx.gif" and the script will do the rest. Now that you have all of your data, you will need three functions to automate the billboard: 
    function boardControl() {
    trueboardSpeed = boardSpeed + (trans.length * transSpeed);  <-- get true lull time
    changeBoard();                                              <-- start transition loop
    setTimeout("boardControl()", trueboardSpeed);               <-- wait during transition
    }                                                               loop and lull time
    
    function changeBoard() {
        if (transNum > trans.length - 1) {                      <-- if last transition img
        boardNum++;                                                 has been displayed then
        transNum = 0;                                               display the main img
                if (boardNum > billboard.length - 1) boardNum = 0;
        displayBoard();
        return;
        }
        else {
        document.billboardimg.src = trans[transNum].src;       <-- else display the next
        setTimeout("changeBoard()", transSpeed);                   transition image         
        }
    transNum++;
    }
    function displayBoard() {
    document.billboardimg.src = billboard[boardNum].src;       <-- display the current img
    return;
    }
}
It's not vital that you understand exactly what these functions do, just know how to use them with the image arrays. The last function you need is very simple, all it does is bring you to the proper url: 
    function jumpBillboard() {
    window.location.href = url[boardNum];
    }
Now create an image named "billboardimg" in the document with an HREF tag that calls jumpBillboard(): 
    &ltA HREF = "javascript:jumpBillboard()"
       onMouseover = "window.status = url[boardNum];return true;"
       onMouseout = "window.status = '';return true;">
    &ltIMG NAME = "billboardimg"
     BORDER = 0 HEIGHT = 31 WIDTH = 250 SRC = "/this_week.gif">&lt/A>
Lastly, put onLoad = "boardControl()" in the BODY tag so the billboard will start when all the images are done loading. That's all there is to it.

After this, you'll never look at billboards the same way again.

Source