Washington & Northern Idaho Railroad Maps - Available from Sonrisa Publications

Train GIF Railyard

TrainGIF Railyard

TrainGIF Tutorial
Updated March 22, 2006

Making a Scrolling Train

The moving trains on this site are produced by using the MARQUEE tag in HTML. This scrolls a sequence of text or images across the screen, from the left or from the right. There are other methods to do this, but I chose MARQUEE since it is simple and easy to use. However it may not work in all browsers. If it won't work in yours, you know by now, because you haven't been able to see the moving trains on these pages.


Here is the basic construction of a scrolling marquee:

<MARQUEE>This is supposed to be a train.</MARQUEE>

Which appears on your screen like this:

This is supposed to be a train.

Movement can be from left to right with an additional instruction:

<MARQUEE direction="right">This is supposed to be a train.</MARQUEE>

This is supposed to be a train.

Obviously, the illusion of an actual train is greatly enhanced by the use of images. These are usually made in the GIF format, which takes up very little file space. You can make your own or use existing GIF's on the web such as the ones found on these pages.

Once you've located a suitable image, you need to download it. It is extremely poor manners to link directly to the images on someone else's site. This increases their bandwidth and can cause excess charges from their internet service provider!

Your browser should have download capability. In Internet Explorer, right click on the image and select "Save Picture As...". Store the file in the folder of your choice so you can access it later. Try it with the Santa Fe locomotive image below:


Throttle up and let's highball:

<MARQUEE><IMG SRC="sfsd45y.gif"></MARQUEE>

The middle section of this instruction tells the computer where to find the image file. You will need to add a path if the file is not in the same folder as your HTML document.


Fill out your consist by adding more images, keeping them all on the same line. Do not use carriage returns (ENTER key) as this will place a space between the images. However, your text may wrap to the next line, as shown in my example:

<MARQUEE><IMG SRC="atsf/sfsd45y.gif"><IMG SRC="sfsd42sr.gif"><IMG SRC="bcit841.gif"><IMG SRC="bn448.gif"><IMG SRC="mrl210.gif"><IMG SRC="crgx6500.gif"></MARQUEE>


Train speed can be controlled with the scrollamount, scrolldelay and truespeed attributes. Experiment with their values to get the desired effect.

<MARQUEE scrollamount="1" scrolldelay="20" direction="right" truespeed><IMG SRC="bcit841.gif"><IMG SRC="bn448.gif"><IMG SRC="mrl210.gif"><IMG SRC="crgx6500.gif"><IMG SRC="sfsd45y.gif"><IMG SRC="sfsd42sr.gif"></MARQUEE>

Note how the locomotives have "run around" their train to go the opposite direction. You image list will need to do the same, unless you want to make a reverse movement.


That's about all there is to it! If you use my images on your own site, please give proper credit and provide a link to djcooley.com. Please email and let me know the address of your page - it's always interesting to see how these trains are being used.

Have fun building and running your own virtual rail system!

Dave Cooley



Return to Train GIF's home


Copyright 2003, 2006 David J. Cooley

Copyright information: All images on this page (and throughout djcooley.com) are the work of, and copyrighted by, David J. Cooley. You are encouraged to download and use these images on your personal website, as long as credit is given and a link to this page is provided. Please do not link directly to the images on this page.

Please note that you are not authorized to download and use these images on any website or other medium that has any commercial content, including banner or other advertisements. Contact David J. Cooley if you wish to use these images in any manner that may be considered commercial.