The address for this web page is:   http://fishcaro.crosswinds.net/day_9pt5_marquee_and_more.htm


On to the next lesson!
Back to the COURSE SYLLABUS

9.5 THE MARQUEE TAG


Today's lesson talks about a tag that can make your web pages more colorful, more animated (and—if you're not careful—more annoying).

Lots of the information for this card was obtained from the FUNKY CHICKENS web site, which was created in December 1999 to help teach HTML (HyperText Markup Language). I highly recommend it! Check it out!

Funky Chickens (the link I had is no longer valid)

INDEX CARDS #9.5:

THE "MARQUEE" and "BLINK" TAGS (9.5a)

For eye-catching moving text, Internet Explorer (IE) offers the MARQUEE tag, and Netscape Navigator (NN) offers the BLINK tag. MARQUEE only works in IE, and BLINK only works in NN. Use both sparingly, since too much moving/blinking text can be distracting and annoying.

You may want to nest MARQUEE and BLINK tags (see below) so that viewers on both major browsers will see some special effect. Recall that a browser will just ignore a tag that it doesn't understand. (So—the MARQUEE tag will be ignored in NN, and the BLINK tag will be ignored in IE.)

Here's the code:

<BLINK><MARQUEE>This text will move in IE, and blink in NN.</MARQUEE></BLINK>

Here's the effect of this code:

This text will move in IE, and blink in NN.

BOUNCE and SLIDE (9.5b)

THE BASIC MARQUEE TAG: uses all available width, moves right to left, disappears one character at a time, re-appears on the right, repeats forever.
the code:
<MARQUEE>the basic marquee tag</MARQUEE>
the code produces:
the basic marquee tag
BOUNCING TEXT: Instead of disappearing into the left margin, it hits the left margin, bounces back, hits the right margin, bounces back, etc.
the code:
<MARQUEE BEHAVIOR="alternate">bouncing text</MARQUEE>
the code produces:
bouncing text
SLIDING TEXT: The text slides from right to left, only once, stopping and staying at the left margin. Use this near the top of a web page: if it's down too far, it will have slid and stopped before the viewer gets to it!
the code:
<MARQUEE BEHAVIOR="slide">sliding text</MARQUEE>
the code produces: (Refresh/Reload this page to see it "slide" again!)
sliding text


COLOR and WIDTH (9.5c)

CHANGING THE BACKGROUND COLOR: Colors are listed on pages 79–84 of the Weasel book. (More on colors in Lessons 26 and 27.)
the code:
<MARQUEE BGCOLOR="darkslateblue">this color is darkslateblue</MARQUEE>
the code produces:
this color is darkslateblue
CHANGING THE WIDTH: You can change the width of the scrolling area, by specifying a percentage of the available window width, or by specifying a fixed number of pixels:
the code:
<MARQUEE WIDTH="50%">Only 50% of the window width</MARQUEE>
the code produces:
Only 50% of the window width
the code:
<MARQUEE WIDTH="100">Only 100 pixels of window width</MARQUEE>
the code produces:
Only 100 pixels of window width

DIRECTION (9.5d)

CHANGING THE SCROLLING DIRECTION:The text can scroll left, right, up, or down, by using the DIRECTION attribute. The default value is "left".
the code:
<MARQUEE DIRECTION="right">moving to the right</MARQUEE>
the code produces:
moving to the right
For up and down motion, specify the height (in pixels) you want, like this:
the code:
<MARQUEE DIRECTION="up" HEIGHT="30">moving up; 30 pixel height</MARQUEE>
the code produces:
moving up; 30 pixel height
the code:
<MARQUEE DIRECTION="down" HEIGHT="60">moving down; 60 pixel height</MARQUEE>
the code produces:
moving down; 60 pixel height


SPEED (9.5e)

CHANGING THE "SPEED": The SCROLLAMOUNT attribute actually sets the number of pixels to move the text for each scroll movement. For example, SCROLLAMOUNT="20" means "display the text, move 20 pixels, display the text again." The greater the scroll amount, the faster it looks like the text is moving (but it's also "jerkier"). Experiment! These will of course move at different speeds on different machines.
the code:
<MARQUEE SCROLLAMOUNT="1">SPEED 1</MARQUEE>

the code produces:
SCROLLAMOUNT 1

Here are some other speeds:
SCROLLAMOUNT 10


SCROLLAMOUNT 20


SCROLLAMOUNT 40

LOOPS and DELAYS (9.5f)

SPECIFYING THE NUMBER OF LOOPS: You can specify how many "loops" there will be, before the text disappears:
the code:
<MARQUEE LOOP="3">3 loops, then stop. Reload the page to see!</MARQUEE>
the code produces:
3 loops, then stop. Reload the page to see!
DELAY BETWEEN MOVEMENTS: You can specify a delay, in milliseconds, between successive movements of the text. There are 1000 milliseconds in 1 second. the code:
<MARQUEE DELAY="500">500 ms delay between movements</MARQUEE>
the code produces:
500 ms delay between movements
Here are some other delays, and scrollamount/delay combinations: 1000 ms delay between movements

500 ms delay, 80 pixel scrollamount

500 ms delay, 40 pixel scrollamount


PUTTING IT ALL TOGETHER (9.5g)

You can put lots of things together! Experiment and have fun! In the sample below, notice how both the colored box is centered, and the text inside it is also centered.
the code:
<CENTER><MARQUEE BEHAVIOR="alternate" BGCOLOR="darkgreen" WIDTH="25%" DIRECTION="up" HEIGHT="80" SCROLLAMOUNT="20">
<CENTER>Look at this!</CENTER>
</MARQUEE></CENTER>


the code produces:
Look at this!

CHANGING THE SPEED FOR "MOUSE-OVER" (9.5h)

You can change the speed when the mouse is over the text. For example, you might want to have the text slow down, so that it's easier to read, when the mouse is moved over it.

The stuff inside the quotation marks below is case sensitive. To work properly, and not produce errors, you must type exactly "this.scrollAmount=2".
For example, if you type "THIS.scrollAmount=2" you'll get an error.
If you type "this.scrollamount=2" it won't work.


the code:
<MARQUEE onMouseover="this.scrollAmount=2" onMouseout="this.scrollAmount=30">See what happens when you move your mouse over the text!</MARQUEE>


the code produces: See what happens when you move your mouse over the text!


Printable version of Index Card 9.5a

Printable version of Index Card 9.5b

Printable version of Index Card 9.5c

Printable version of Index Card 9.5d

Printable version of Index Card 9.5e

Printable version of Index Card 9.5f

Printable version of Index Card 9.5g

Printable version of Index Card 9.5h

WORKSHEET #9.5:

ASSIGNMENT #9.5:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2000 Carol J.V. Fisher    All Rights Reserved