[Techtalk] script

Fri Apr 11 09:56:51 EST 2003

Thanks Almut. I had wondered about how to do this as well. I used your
javascript and it works fine if I have it in it's own HTML page. But if I
use it in an existing HTML page, it just cycles the first picture, then a
red X box appears. I named the pics frame1.jpg thru frame4.jpg and they are
all the same size. Any idea why it work when alone but doesn't play well
with others :) ?

I know little about javascript, so I'm afraid I'm pretty lost. Thanks for
the help.

-----Original Message-----
From: Almut Behrens [mailto:almut-behrens at gmx.net]
Sent: Thursday, April 10, 2003 8:46 PM
To: techtalk at linuxchix.org
Subject: Re: [Techtalk] script

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

_______________________________________________
Techtalk mailing list
Techtalk at linuxchix.org
http://mailman.linuxchix.org/mailman/listinfo/techtalk