Nadzor večsličnih GIFov

po članku E. Neuwirtha priredil V. Batagelj

At the beginning of the <body> part of the HTML document we need the following piece of JavaScript code: 

<script language="javascript"> prva = new Image(270,270) prva.src="slika.gif" niz = new Image(270,270) niz.src="slike.gif" function kazi (imageID,objectName) { document.images[imageID].src = eval(objectName + ".src"); } </script> This piece of code assumes that 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:

<center> <A href="" onMouseOver="window.status='Click on image to run movie'; return true" onMouseOut="kazi('prva','prva');window.status=''; return true" onClick="kazi('prva','niz');return false"> <IMG SRC="slika.gif" NAME="prva" height=270 width=270 BORDER=0></A> </center> The 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