 | |
| 3.1 | Mouse-Click Animation |
| |
| 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;
setTimeout("slide()",30);
}
}
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>
| ||
| 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 |
| ||