JavaScript Tip of the Week for December 30, 1996: Netscape 4.0 Preview: Layers | Source Code | WebReference

JavaScript Tip of the Week for December 30, 1996: Netscape 4.0 Preview: Layers | Source Code

JavaScript Tip of the Weekfor December 30, 1996: Source Code: Netscape 4.0 Preview: Layers

Here's the code that was used to create the animated Pointcast-like JTotW title image:

<HTML>
<HEAD>
<TITLE>JavaScript Tip of the Week for December 30, 1996: Netscape 4.0 Preview: Layers</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!-- 
function init() {
cup = document.layers['cup'];
js = document.layers['js'];
js_move = document.layers['js_move'];
tot = document.layers['tot'];
week = document.layers['week'];
week_move = document.layers['week_move'];
width = document.width_img.width;
height = document.height_img.height;
cup.visibility = 'HIDE';
js.visibility = 'HIDE';
js_move.visibility = 'SHOW';
js_move.left = width;
tot.visibility = 'SHOW';
week.visibility = 'HIDE';
current = 6;
window.frameRate = 20;
window.flickerFree = true;
showJavaScript();
}
function showJavaScript() {
js_move.offset(-25, 0);
    if (js_move.left > 13) reShow1 = setTimeout('clearTimeout(reShow1);showJavaScript()', 10); 
    else {
    js_move.visibility = 'HIDE';
    js.visibility = 'SHOW';
    week_move.top = height;
    week_move.visibility = 'SHOW';
    showWeek();
    }
}
function showWeek() {
week_move.offset(0, -25);
    if (week_move.top > 171) reShow2 = setTimeout('clearTimeout(reShow2);showWeek()', 10); 
    else {
    week_move.visibility = 'HIDE';
    week.visibility = 'SHOW';
    cup.visibility = 'SHOW';
    showCup();
    }
}
function showCup() {
current--;
    if (current > 0) {
    eval('document.cup_image.src = "cup' + current + '.gif"');
    reShow3 = setTimeout('clearTimeout(reShow3);showCup()', 50);
    }
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad = "init()" TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#B8860B" VLINK="#B8860B" ALINK="#8B0000">
<IMG ALIGN = LEFT NAME = "width_img" HEIGHT = 1 WIDTH = "100%" SRC = "pixel.gif">
<IMG ALIGN = RIGHT NAME = "height_img" HEIGHT = "100%" WIDTH = 1 SRC = "pixel.gif">
    <!-- These five layers each contain one image: just part of the whole JTotW 
         title image. They are all transparent GIF89A's, so there is no problem
         overlapping them.
    -->
    <LAYER NAME = "cup" HEIGHT = 91 WIDTH = 67 LEFT = 10 TOP = 134 VISIBILITY = HIDE>
    <IMG NAME = "cup_image" HEIGHT = 91 WIDTH = 67 SRC = "pixel.gif">
    </LAYER>  
    <LAYER NAME = "js" HEIGHT = 62 WIDTH = 171 LEFT = 11 TOP = 93 VISIBILITY = HIDE>
    <IMG HEIGHT = 62 WIDTH = 171 SRC = "javascript.gif">
    </LAYER>  
    <LAYER NAME = "js_move" HEIGHT = 62 WIDTH = 180 LEFT = 11 TOP = 93 VISIBILITY = HIDE>
    <IMG HEIGHT = 62 WIDTH = 180 SRC = "javascript_move.gif">
    </LAYER>  
    <LAYER NAME = "tot" HEIGHT = 26 WIDTH = 92 LEFT = 86 TOP = 148 VISIBILITY = HIDE>
    <IMG HEIGHT = 26 WIDTH = 92 SRC = "tip_of_the.gif">
    </LAYER>  
    <LAYER NAME = "week" HEIGHT = 50 WIDTH = 89 LEFT = 93 TOP = 171 VISIBILITY = HIDE>
    <IMG HEIGHT = 50 WIDTH = 89 SRC = "week.gif">
    </LAYER>   
    <LAYER NAME = "week_move" HEIGHT = 50 WIDTH = 89 LEFT = 93 TOP = 171 VISIBILITY = HIDE>
    <IMG HEIGHT = 60 WIDTH = 89 SRC = "week_move.gif">
    </LAYER>   
</BODY>
</HTML>