FROGRAIL TRAIN GIF SCENES

Using the <marquee> Tag

    behavior
    bgcolor
    direction
    height
    loop
    scrollamount
    scrolldelay
    width

Working with Images

    General
    One Image
    Multiple Images
    Using Spacers

Introduction

The <marquee> tag, as the name implies, is a vehicle by which you can make an object scroll across a Web page. In its simplest form, it is written as follows:

<marquee>Text</marquee> , which will yield the following:

Text

Before proceeding further in this discussion, it is important for you to know the one significant limitation to this tag: The <marquee> tag is only supported by Internet Explorer. Opera, Lynx, Netscape, AOL, etc do not support it -- they simply ignore it (although Lynx will give you a static display of what's enclosed within the tag). If you want your scrolling marquee to be seen by the maximum number of folks, don't use the <marquee> tag, use scripting, as per Brian Clough's tutorials, which are here.

One more point before proceeding. Marquees, like blinking text and other simple animations become very irritating very fast. Be cautious about using them, and use them wisely, or you'll drive your visitors away.

This tutorial is not intended to be 100% complete, but you'll be exposed to the most common attributes and image usage within the <marquee> element. The tutorial was written by Tony Hill, Frograil's Webmaster. It is not copyright, and you are welcome to do with it what you wish.

Attributes

bgcolor Sets the color for the marquee's background.

Text

direction Sets the direction that the text or images will scroll.

Text

The available directions are: down, left, right, up. If you plan to use down or up, you'd better be careful, because it will usually not work the way you want it too unless you use a table or frameset design.

height Sets the height of the scrolling box.

<marquee height="40" bgcolor="#dbdb70">Text</marquee> In this example, the height is specified as being 40 pixels (72 pixels = 1 inch).

Text

loop An attribute which, IMHO, should always be included. Any animation that plays over and over and over, etc, gets boring and even irritating in a very short time. You can specify the number of loops (or trips across the screen) that you want your marquee to make. In this example, the marquee will scroll twice and not reappear.

Text

scrollamount This oddly-named attribute controls the speed with which the material in the marquee box moves. The default is somewhere around 5-6. Here are 3 examples:

Text

Text

Text

scrolldelay You can use this attribute to control the delay time between movements of the material within your marquee. This will cause a herky-jerky action, but it may be one you're interesting in achieving.

Text

behavior You have 3 options: Scroll, slide, and alternate. Scroll is the default, so you don't need to declare this attribute if you just want a normal marquee. Slide comes in from the margin, goes across the page, and stops at the opposite margin. Alternate comes in from the margin, goes across the page, hits the opposite margin and reverses. Once to the original margin, it reverses again, etc.

Text

width This sets the width your marquee will occupy:

Text

Working with Images

General

When you start working with images, you have tagging similar to any anchor tagging, in that you must put a reference up for your image. While HTML is pretty sloppy as a general rule, in hypertext referencing, no sloppiness is allowed. You must be precise in your spelling (although the reference is not case sensitive), and the path to the image file must be perfect.

Also, you should put your marquee within a container tag, such as <div></div> or <p></p> . If you'll have several trains, spacers, etc, you should use the <div> element, rather than the <p> element.

One Image

At it's simplest, here is one image in a marquee tag. The gifs used in these examples are by Dave Hersrud.

Multiple Images

Using more than one image is all done within the <marquee> tags:

You must be careful not to put spaces or hit enter> between images, as that will put a space between your cars, which not only looks dumb, it takes away 99% of the realism of the scene.

Using Spacers

You can create spacers, which are blank transparent gifs, and use them to put distance between trains. In the following example, I've used a 300pixel spacer. You can make the distance as long or short as you wish.

FROGRAIL TRAIN GIF SCENES

Using the <marquee> Tag

Table of Contents

Introduction

Attributes

Working with Images

General

One Image

Multiple Images

Using Spacers