home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeHTML & XHTML: The Definitive GuideSearch this book

5.5. Animated Text

In what appears to be an effort to woo advertisers, Internet Explorer has added a form of animated text to HTML. The animation is simple -- text scrolling horizontally across the display -- but effective for moving banners and other elements that readily and easily animate an otherwise static document. On the other hand, like the <blink> tag, animated text can easily become intrusive and abusive for the reader. Use with caution, please, if at all.

5.5.1. The <marquee> Tag

The <marquee> tag defines the text that scrolls across the Internet Explorer user's display.



Create a scrolling text marquee















End tag:

</marquee>; never omitted



Used in:


The <marquee> tag is for Internet Explorer only and is not a standard tag. The text between the <marquee> tag and its required </marquee> end tag scrolls horizontally across the display. The various tag attributes control the size of the display area, its appearance, its alignment with the surrounding text, and the scrolling speed.

The <marquee> tag and attributes are ignored by other browsers, but its contents are not. They are displayed as static text, sans any alignment or special treatments afforded by the <marquee> tag attributes. The behavior, direction, and loop attributes

Together, these three attributes control the style, direction, and duration of the scrolling in your marquee.

The behavior attribute accepts three values:

scroll (default)

The value of scroll causes the marquee to act like the grand marquee in Times Square: the marquee area is empty initially; the text then scrolls in from one side (controlled by the direction attribute), continues across until it reaches the other side of the marquee, and then scrolls off until the marquee is once again empty.


This value causes the marquee to start empty. Text then scrolls in from one side (controlled by the direction attribute), stops when it reaches the other side, and remains onscreen.


Specifying alternate as the value for the behavior attribute causes the marquee to start with the text fully visible at one end of the marquee area. The text then scrolls until it reaches the other end, whereupon it reverses direction and scrolls back to its starting point.

If you do not specify a marquee behavior, the default behavior is scroll.

The direction attribute sets the direction for marquee text scrolling. Acceptable values are either left (the default) or right. Note that the starting end for the scrolling is opposite to the direction: left means that the text starts at the right of the marquee and scrolls to the left. Remember also that rightward-scrolling text is counter-intuitive to anyone who reads left to right.

The loop attribute determines how many times the marquee text scrolls. If an integer value is provided, the scrolling action is repeated that many times. If the value is infinite, the scrolling repeats until the user moves on to another document within the browser.

Putting some of these attributes together:

<marquee align=center loop=infinite>
  Kumquats aren't filling
  ..........      Taste great, too! 

The example message starts at the right side of the display window (default), scrolls leftward all the way across and off the Internet Explorer display, and then starts over again until the user moves on to another page. Notice the intervening periods and spaces for the "trailer"; you can't append one marquee to another.

Also, the slide-style of scrolling looks jerky when repeated and should only be scrolled once. Other scrolling behaviors work well with repeated scrolling.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.