Dan's Layers Tutorial

Layers are a brand new concept of HTML introduced with Netscape Communicator. Layers allow you to postion elements (text, images etc.) using a coordinate system. JavaScript 1.2 can be used to make some very compelling presentations by hiding and showing different layers, and moving them around the screen for animations. This tutorial will concentrate on how to make such animations.

1.1 Introduction to Layers
1.2 Overlapping Layers
1.3 Nesting Layers
1.4 Using JavaScript 1.2

Hiding and Showing
Moving Layers
Moving on Diagonals
Clipping Layers

2.1 Sliding Layers

Sliding Multiple Layers
All Directions

2.2 Pre-Built Functions

Circle
Spiral
Hovering
Sine Wave
Parabola
Figure-8
Slanted Oval

2.3 Clipping Layers

Clipping Multiple Edges

2.4 Looping Animations
2.5 Changing Images

3.1 Mouse-Click Animation
3.2 Capturing Keystrokes
3.3 Drag and Drop [revised]

4.1 Making Demos
4.2 Static Animations

Text Play
Stealth Bomber
Solar System
Circle Spectacular

4.3 Interactive Animations/Games

Scrolling Text
Pull Out Menus
Military Tank
Puzzle Game
WarTank Game

4.4 Known Problems with Layers
4.5 Dealing with Screen Sizes

Other Resources
Back to Dan's Advanced <HTML>
Download this tutorial
E-mail Your Feedback

This tutorial was made by Dan Steinman (dj2stein@novice.uwaterloo.ca)

Last Updated on 9/20/97