Move the Slider and Click to Change the Animation Speed
Click on the Clown to Go Back
Slow <<< Speed Slider >>>Fast
Click to Set
Animation Speed
This page demonstrates image animation using JavaScript.
Animation Speed
To create the slider motion a client-side image map was made which divides the image into twelve areas and contains calls to JavaScript functions to load the appropriate images, and to display the inter-frame delay value in a text input box of a form (onMouseOver). The animation speed is changed using the onClick call.
To remove messages in the status bar when the mouse is over the slider a window.status="" statement is put in the onMouseOver call in the image map. (It does not work if put in the function called by the onMouseOver.)
The eight clown images were created from the demo files provided with Synth MooVier 2.01, a freeware Macintosh application by Marco Bonasoro which creates QuickTime movies. The movie frames were converted into individual gifs using the freeware Macintosh application GifBuilder 0.4 by Yves Piguet.
The IMG tag for the clown contains an onLoad call to a JavaScript function (setTimeout) which updates the image with a call to a JavaScript function using a delay set by the slider.
The link tag for the clown contains a JavaScript call to the history array to go back and a onMouseOver call to display a message in the status bar.
The eleven images for the meter were created using the Macintosh application Canvas 3.5.4 and converted to gif format with GraphicConverter 2.8.
The meter values are from 0 through 10. To display the speed of animation on the meter the Math function was used to round-off the percent change to the nearest 10%. The animation rate is changed when the slider is clicked.
File names for the images were chosen to end in a serial number starting with 0. This makes keeping track of the image file simpler.
All the images are pre-loaded using the Image tag into arrays with the index corresponding to the serial number in the image name.
The code for the page is extensively annotated. Please help yourself, but if you use it, we would like you to give WebSorcerer credit somehow and let us know where your site is so that we can appreciate your work. Download this page.