honeylocust.ImageStack

May 24, 1998. This page was written when Netscape 3 was still in beta. Today LiveConnect is supported in IE 4 as well as Communicator, so the idea of scripting Java components from Javascript is still viable. ImageStack itself, however, is a bit obsolete since one can use the src property of an image in either Netscape 3+ or IE 4 to change an image in pure Javascript. It's very possible that Netscape will be migrating it's Java support in Netscape 5 into Sun's Java Activator plug-in which will require changes in the plugin interface to support LiveConnect. Prehaps this is an area where you can help at mozilla.org. Our Freedom VR applet uses a more sophisticated LiveConnect interface for programming hotspots.

I wrote ImageStack to try out Netscape's LiveConnect. ImageStack is a Java applet designed to be embedded in a web page to extend the capabilities of Javascript. Together with a few other applets, it could allow Javascript to be used as a multimedia authoring language. I wrote ImageStack just before Netscape added the Image object which allows javascript to change images directly -- that mechanism is faster and simpler for doing what I do on this page. However ImageStack is still a good demonstration of LiveConnect programming; the hotspot programming interface of my applet Freedom VR is a more modern example.

ImageStack is an applet which loads a collection of images, preferably all the same size, and can be commanded by an a Javascript to display any of them at any time. Any Javascript event can control the applet, so ImageStack has unlimited applications. Because ImageStack is configured using <PARAM> tags, it can be used even if you don't know any Java or don't have a Java compiler.

If you're using a version of Netscape that supports LiveConnect (I developed it on Netscape 3.0b5), you can see two simple demonstrations on this page. The first is an album of four images which you can flip through by pushing buttons.


Press buttons to change picture.

Animation is just changing images in rapid succession. Javascript can call ImageStack repeatedly to produce an animation. I copied images from Animator class demo that comes with the JDK and wrote a little Javascript program that runs an animation when you click on the button below. Such an animation can be triggered by any Javascript event. Javascript has complete control of the timing and the sequence of the animation.

ImageStack is a bit rough -- it's actually a dumbed-down version of the Animator class that comes with the JDK. Even so, it does add a new dimension of interactivity to Javascript. ImageStack is free for you to include on a page, although I do ask you to include the following comment somewhere in your script so people can keep informed of changes.

// honeylocust.ImageStack v1.0 by (c) 1996 by Paul Houle
// see: http://www.honeylocust.com/javascript/ImageStack.html

Here's what you need to get started.

Download the class file. You can also look at the source code.
Go to the directory where your page is stored; make a subdirectory called honeylocust.
Place ImageStack.class in the honeylocust directory.
Use View Source to examine the Javascript and the <APPLET> tags in this page to see how it works.
All of the images that an ImageStack uses must be stored the same directory -- tell it the name of that directory with the imagesource <PARAM> tag.
Specify the names of the images in the images param tag separated by | characters.
Use the NAME option of the <APPLET> tag to name your applet.
One easy way to use ImageStack is to copy the code in the head of this page. Call changeimage("applet name" ,image number"). Image numbers start at zero.