At the beginning of the <body> part of the HTML document we need the following piece of JavaScript code:
slika.gif
is the first frame of our movie as a separate file, and that
niz.gif
is the full movie. For using the technique we are about to demonstrate,
the movie should be in infinite loop mode.
At the place in our HTML document where we want the movie to be embedded, we insert the following piece of HTML code:
window.status
message makes the browser display the
associated text in the status line of the window when the mouse
is moved over the image, thereby offering the user a hint that the
image can be animated. The onClick
property essentially
starts the movie when the first frame image is clicked. The
onMouseOut
property sets things back to original
state when the mouse is moved away from the image, and it even
makes the movie stop when he mouse leaves the image area.
This method still has one very noticeable shortcoming: when the first frame is clicked the movie does not start with this frame and the go on to the second frame and so on. Instead, it starts with a more or less unpredictable frame and then loops through the series of images. What really is happening is that the movie already is running "behind the first frame" and when the displayed first frame is clicked, the images just switches over to the currently displayed frame of the running movie. At the moment, this problem cannot be solved in an easy way by using only JavaScript. Hopefully, the next generation of Web browsers will implement the full standard for animated GIF files, allowing animation start by user action like many video formats in use on the Web already do. When one is designing animation with our technique, one has to keep in mind that we do not start a movie, but we uncover a screen with a continuously running movie in loop mode. Nevertheless, what this allows us is to implement a minimalist approach to animation, which can be displayed in almost any Web browser.
Here is this example worked "in real life":
And a more complex example