Dan's Layers Tutorial
3.1  Mouse-Click Animation

All the animations I've showed you so far are what I call "static". Once they are set in motion, the user is forced to sit back and watch. Well there are many ways to add some interactivity to your animations, and I will show you a pretty easy way.

I'll show you how to make a normal link be a "slide" button. When someone holds down the slide button the layer will slide, and when they release it the layer will stop.

The script is just a simple slide but I'm using the variable "stop" to determine when to end the loop.

function slide() {
	if (stop == 1) {
		document.layers["layer1"].left += 5;

The "slide" button will be just a hyperlink, but you can of course make it an image if you want to. The trouble with a hyperlink though is that you have to have the HREF pointing somewhere. Since we don't want to go anywhere we can just point it to javascript:void(null) which will do absolutely nothing when clicked.

The hyperlink uses the onMouseDown event to set "stop" to 1 and begin the slide. Both onMouseUp and onMouseOut should be used to set "stop" to 0 to stop the slide. This will make the link fool-proof.

<A HREF="javascript:void(null)" onMouseDown="stop=1;slide()" onMouseUp="stop=0" onMouseOut="stop=0">Slide</A>

Dan's Layers Tutorial
1.1 Introduction
1.2 Overlapping
1.3 Nesting
1.4 Using JavaScript
2.1 Sliding Layers
2.2 Pre-Built Functions
2.3 Clipping Layers
2.4 Looping Animations
2.5 Changing Images
3.1 Mouse-Click Animation
3.2 Capturing Keystrokes
3.3 Drag and Drop
4.1 Making Demos
4.4 Problems
4.5 Screen Sizes

Copyright © 1997 Dan Steinman. All rights reserved.