The Train Gif JavaScript Tutorial


I started painting Train Gifs in late 2000, after discovering the work of Dan Klitzing, Alex Stroshane, and Chris Denbow. However, one thing confused me when I looked at the pages of several "giffers". Some had confusing jumbles of images that obscured parts of the text in my Netscape browser. This was my first encounter with the dreaded <MARQUEE> HTML tag :) This IE proprietary tag had become the favored method of creating animated Train Gif scenes, but since Netscape doesn't support this "feature", any pages that use it don't render well in Netscape.

I decided to find out if there was a way to duplicate the functionality of MARQUEE, in a Netscape compatible way. I found that no such method existed, so (being a software engineer by trade) I decided to develop one myself. I decided on Javascript, because it was similar to languages I'd used before, and seemed easy to integrate with existing web pages.

I realized that there was no reason to simply duplicate MARQUEE. Since I was writing this application from scratch, I could add capabilities that Marquee didn't have.

I wrote several test applications, and several functional versions, but maintaining cross-browser compatibility was difficult.

After working on the system for several months, I discovered Dr. Clue's Javascript DHTML Library, a Javascript file that allows the creation of completely browser-independent objects in a web page. The "Dr. Clue" version of the system became "Phase 2a".

As usual, in software development, the user always wants a little more :) Phase 2a contained the ability to decelerate a train to a stop, and it would automatically start moving again, after a short pause. Several people asked for the ability to reverse a train after stopping. Thus came Phase2b.

There were still several bugs, mostly related to IE's tendency to try to measure images before they had a chance to download. In December '01, I re-wrote parts of the script, in order to pre-load all images, before the scenes get initialized. With this problem solved, I feel that this system is ready for use by others.

I wanted to make this application easy for others to use, and this tutorial should answer any questions you might have, when adding scenes to your pages. If there are any questions that I haven't answered, drop me an and I'll try to answer them.

Table of Contents
Basic Scenes
Static Objects
Placement Options
Train Movement Options
Known Issues And Debugging
Function Dictionary