Back to Main Page

E-Mail Me! Click Here!

Marquees

If you have already read the section entitled "How to Make Things Blink", you know that there are certain tags that are recognized by some browsers while being handily ignored by others. The tags to make marquees are one of these; Internet Explorer will recognize these tags while netscape will not. However, if you combine blink and marquee, you can be assured that your text will do SOMETHING!

When a browser does not recognize one HTML tag or the other, the user will see stationary, static text in the same font as the rest of the page.

Basic Marquees

The tags to make a basic marquee, which will scroll steadily from right to left and do nothing else, is <marquee>Text of Marquee Goes Here</marquee>. This will create an effect identical to the word "marquee" at the top of this page.

Marquee Color

To change the background color of a marquee, type:
<marquee bgcolor="#xxxxxx">Text of the Marquee Goes Here</marquee>. Marquee bgcolor="#333399"Note that this tag will only change the background color. To change the text color, refer to the Fonts page.

Marquee Width

Sometimes you may need a marquee that doesn't scroll across an entire page. This is acomplished using the same attribute employed to resize any object (width="#"). The # can be either a number of pixels, or a percentage of page width. The following marquee has a page width of 60%.

Marquee Direction

While it is usually easier to read text that scrolls from right to left (the first letter shows up first that way), occasionally you might want to reverse the direction of a marquee. To do this, simply type:
<marquee direction="right"> Marquee direction="right"Typing in any direction other that "right" will have no visible effects on your page, and may cause some older browsers to glitch.

Marquee Loop

A normal marquee will loop continuously, but sometimes, you may want to stop it after a while (marquees can get annoying, especially if there are many of them on a page). To do this, type <marquee loop="x">Text of Marquee Goes Here</marquee> Marquee loop="1" Marquee loop="2" Marquee loop="3"Additionally, you may wish to make a marquee which will scroll seemingly forever, but actually stop eventually. To do this, simply specify a much higher number. Marquee loop="50"

Marquee Behavior

This useful tag makes a marquee scroll in different ways (Mysterious Ways? Sorry). I know of two different "behaviors". There may be more, but I cannot say for sure.
<marquee behavior="alternate">
Marquee bahavior="alternate"
<marquee behavior="slide">

Marquee behavior="slide"

Marquee Scrolldelay

This command sets a number of milliseconds between each scroll of a given Marquee. This has the visible effect of slowing down the speed of the marquee. The command looks like this:
<marquee scrolldelay="x">Text of marquee goes here</marquee> Marquee scrolldelay="500" Marquee scrolldelay="250" Marquee scrolldelay="100" Marquee scrolldelay="10"

Marquee Scrollamount

This command is similar in mechanics to scrolldelay, except that it specifies a number of pixels between scrolls instead of milliseconds. This has the effect of creating extra space off the screen that the marquee must scroll through before it will loop around for another pass. The HTML looks like this: <marquee scrollamount="x">Text of marquee goes here</marquee>. Marquee scrollamount="10" Marquee scrollamount="100" Marquee scrollamount="250" Marquee scrollamount="500"Notice that the effects are much faster than the marquees with the same number values in the section above. This is because a normal marquee scrolls through more than 1 pixel per millisecond.

HTML tags in Marquees

Version 3.0 of Internet Explorer will not recognize HTML tags that are inside of a marquee command, versions 4.0 and newer will...sometimes. I have been unable to find out what causes some version 4+ browsers to allow this and others to deny it. It all depends upon what version of Explorer your guest is using, as well as some other cosmic force(s). Written like this:

<marquee>
<font face="Arial" size="5" color="#ffff66">
Text of Marquee goes here
</font> </marquee>

Text of Marquee goes here

The listed font changes may or may not function. However, if you put the tags for the font change outside of the marquee command, all the tags will be recognized by all existing versions of Internet Explorer.

<font face="Arial" size="5" color="#ffff66">
<marquee>
Text of Marquee goes here
</marquee> </font>

Text of Marquee goes here

Graphics as Marquees

This is a nifty little feature that I discovered quite by accident. The <marquee> tag and it's attributes will work when surrounding a graphic image, thus allowing it to move just like text! This works especially well if you have an image of something that is supposedly moving (car, plane, running animal, etc). Let's use this GIF as an example:

This image looks good as is, but it is even cooler when we add <marquee direction="right">