[Techtalk] script

Fri Apr 11 02:46:03 EST 2003

On Thu, Apr 10, 2003 at 05:21:06PM -0400, wolf wrote:
> 
> I'd like
> either something simple in php or javascript (even perl maybe?) that I 
> could enter into an html document that would rotate a series of images 
> every few moments on a web page (without having to re-load the page for 
> the image to change). Try as I might, I can't seem to figure this out 
> and get it to work : (

PHP or Perl may only be used for server-side scripting, as none of
the current browsers support these languages (for security reasons...).

For client-side animation stuff (i.e running in the browser), you
basically have three options: (1) animated gifs, (2) javascript, or
(3) java applets. Using java applets is the only option if you need
real image manipulation, like rotating etc. -- but they require a
certain amount of programming skills (though code templates can be
downloaded from the web). Moreover they require that the user has a
working JRE installed, and that s/he has java enabled in the browser.
Also, they're typically more or less hungry for resources.

Animated gifs and javascript are less powerful, in that they can only
cycle through a sequence of predefined image frames (to be more precise,
in javascript you don't necessarily need to "cycle through", you can of
course load any images in whatever sequence). Those images have to be
created in advance, each frame seperately. Many image manipulation
programs can create an animated gif from a number of individual frames.
On the HTML side those gifs are used just like any other image -- I
guess they're sufficiently well known, so I don't need to elaborate any
further on them...

Javascript provides a few more degrees of freedom than gifs, but, as
with java, it needs to be enabled (though users in general seem to be
less cautious with javascript than with java, at least that's my
impression).  Javascript is relatively easy to use, as you can see
from the following minimal example:

<html>
<head>
<script language="JavaScript">

delay = 1000;  // in msec
n = 4;

imgs = new Array();

for (i=1; i<=n; i++) {
  // preload images, so they are in the cache
  imgs[i] = new Image();
  imgs[i].src = "frame"+i+".jpg";
}

c = 1;

function nextimg() {
  document.myimg.src = imgs[c].src;
  c++;
  if (c>n) c=1;
}

</script>
</head>

<body>
<img src="frame1.jpg" name="myimg" onload="setTimeout('nextimg()', delay)">
</body>
</html>

This makes the browser cycle through a set of four predefined images
frame1.jpg .. frame4.jpg with a configurable delay intervall. I think
the code is pretty self-explanatory, so a brief explanation should do:
The "trick" is to supply some "onload" javascript code that gets
executed when an image finished loading.
This code - "setTimeout('nextimg()', delay)" - sets a timer which calls
the function 'nextimg()' after the specified delay. Within the function
nextimg(), the existing image is replaced by the next one, by assigning
the new imagename/URL to document.myimg.src, wherein "myimg" is the
tagname you chose to identify the image. When that new image finished
loading, onload is executed again, and so on -- you get the idea...
(btw, images should all have the same size.)

Almut