Multiply Themes

Marquee Tags

March 19th, 2008

The <marquee> tag is used to introduce text that scrolls horizontally within a display box. The usual warnings about the distracting and annoying nature of continuously running animations apply.

Here’s a simple example:

IE3, apparently, does not honour any other tags that appear within a marquee so it is impossible to animate multi-coloured text or images this way. This restriction has been relaxed in IE4.

The tag, which is a container tag, has no fewer than 11 attributes.

1. align This tag can take one of the values top, middle and bottom. It controls the positioning of the marquee display box relative to the current text in exactly the same manner as the <img> tag’s align attribute.
2. behavior This tag controls the behaviour of the displayed text. There are three possible values. Text scrolling starts as soon as the page is downloaded, not when the user firsts scrolls the marquee into view.
   

   value	effect	example
   scroll	text scrolls across display and re-appears from the other end when it has disappeared from one end. This is the default behaviour.
   slide	This is similar to scroll except that when the sliding text reaches the far end of the box, it disappears and restarts at the starting end of the box. If the display is not looping then the text remains positioned at the far end of the box.	Hello World
   alternate	text “bounces” between the ends of the box	Hello World

3. bgcolor This tag controls the background colour of the display box, in the example above the display box background colour was set to aqua whereas the table cell background colour was set to white
4. direction This attribute controls the direction of scrolling. Permissible values are left and right specifying the end of the box that the scroll starts from. Here’s some examples.
   

   value	effect	example
   right	starts at right hand end	Hello, World
   left	starts at left hand end	Hello, World

   It appears that the value of this attribute does not affect the behaviour of the marquee if the value of the behavior attribute is alternate

The following four attributes are used in exactly the same way as they are used with the <img> tag.

1. height This controls the height of the display box.
2. width This controls the width of the display box.
3. hspace This controls the horizontal space around the display box.
4. vspace This controls the vertical space around the display box.
5. loop The value of this attribute controls the number of display cycles. The values -1 and infinite both mean continue indefinitely.
6. scrollamount This controls the amount of movement (in pixels) between the successive displays that give the impression of animation.
7. scrolldelay This controls the delay (in milliseconds) between the successive displays that give the impression of animation.Here are some examples
   

   scrollamount	scrolldelay	example
   5	5	Hello, World
   5	500	Hello, World
   50	5	Hello, World
   50	500	Hello, World

The final example should be enough to illustrate the distracting effects of too much animation.

Entry Filed under: Michael Ubamos,Tutorials