Introduction
Attributes:
behavior
bgcolor
direction
height
loop
scrollamount
scrolldelay
width
Working with Images
General
One Image
Multiple Images
Using Spacers
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:
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.
bgcolor Sets the color for the marquee's background.
<marquee bgcolor="#dbdb70">Text</marquee>
direction Sets the direction that the text or images will scroll.
<marquee direction="right">Text</marquee>
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).
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.
<marquee height="40" bgcolor="#dbdb70" loop="2">Text</marquee>
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:
<marquee height="40" bgcolor="#dbdb70" scrollamount="4">Text</marquee>
<marquee height="40" bgcolor="#dbdb70" scrollamount="12">Text</marquee>
<marquee height="40" bgcolor="#dbdb70" scrollamount="24">Text</marquee>
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.
<marquee height="40" bgcolor="#dbdb70" scrolldelay="600">Text</marquee>
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.
<marquee height="40" bgcolor="#dbdb70" behavior="alternate">Text</marquee>
width This sets the width your marquee will occupy:
<marquee height="40" bgcolor="#dbdb70" width="50%">Text</marquee>
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.
At it's simplest, here is one image in a marquee tag. The gifs used in these examples are by Dave Hersrud.
<p><marquee><img src="xyz.gif"></marquee></p>
Using more than one image is all done within the <marquee> tags:
<p><marquee><img src="xyz.gif"><img src="abc.gif"><img src="def.gif"></marquee></p>
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.
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.
<p><marquee><img src="xyz.gif"><img src="spacer.gif"><img src="def.gif"></marquee></p>