|
|
 |
for 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>
|
|
