What is a Marquee:

  A Marquee is a scrolling content pane which can move text , images , links , anything in different directions. Marquees make a web page attractive to viewer. Marquees are embedded in browser so we don't have to write a long java script code. We can create a marquee with just one line of code using <marquee> tag.

Remember: Marquee is supported by internet explorer only. It does not work with Netscape navigator.

Creating a Scrolling Marquee:

  Marquee can be created by using <marquee> tag. You can place it anywhere within the body section of a web page. Example below will demonstrate how to use it:


    <marquee direction="left"> Your Text To Be Scrolled </marquee>
 

Result:
Place the above code anywhere within body section. This will result the following:

    You Text To Be Scrolled.

 

Working With Direction Attribute:

  The direction attribute of the marquee is used to set one of four directions. Left ,right, up and down. You can set direction value to left or right.


    <marquee direction="left"> This marquee has direction "Left"</marquee>

    <marquee direction="right"> This marquee has direction "Right"</marquee>

    <marquee direction="up"> This marquee will go to Up</marquee>

    <marquee direction="down"> This marquee will go down </marquee>
 

Sample:

This marquee has direction "Left".

This marquee has direction "Right".


            This marquee will go to up. You can place any type of content in marquee.

 
            This marquee will go down. All the contents will go from up to down.

 

Working With Behavior Attribute:

  The behavior attribute of a marquee tag defines the marquee behavior from one of three supported behaviors. i.e.  Scroll , Alternative , and Slide.   
1. The scroll behavior sets the marquee to scroll to a specific direction forever.


    <marquee behavior="scroll" direction="left"> This text will always scroll to left </marquee>
 


    Result:

This Marquee will always scroll to left

2. The Alternative behavior sets the marquee to scroll between the height or width of the marquee. When text reaches to the one corner it will move back and so on......


    <marquee behavior="alternate" width="200"> This is Cool </marquee>
 

Result:
                    This is Coool
 

3. The Slide behavior of the marquee slides the contents of marquee to a specific direction and stops after reaching end of width or height. To understand this type of behavior see the following example:


    <marquee behavior="slide" direction="right" width="200">I really like this sliding text..... </marquee>
 

Result:        (Reload your page to view again).

        I really like this sliding Text............

 

Changing the Background of a Marquee:

  You can also change the background color of a marquee with bgcolor attribute. For example:


    <marquee behavior="alternate" bgcolor="#006600"> ....I have a background   
    color...</marquee>
 

   Sample:
 

           
.....I have a BackGround Color..... 

 

Changing the width and height:

  You can also set the width and height of a marquee manually, depending upon the text you want to scroll. To set the width of the marquee use the width property and same for the height , use height property. You can use numeric values in pixals(px) , points(pt) also in percentage(%).

For example:


<marquee direction="left" width="200"> This marquee has 200 width</marquee>

<marquee direction="up" height="70">This marquee has 70 height</marquee>
 

  Sample:
                        This marquee has 200 width:

                        This marquee has 200 height:

 

Controlling the Speed of Marquee:

  You can control the speed of marquee with a special attribute called "scroll amount". You have to add this within your marquee tag. Greater the scroll amount will case the marquee to scroll with higher speed and vise versa. See the following examples:


    <marquee direction="left" width="200" scrollamount="2"> This is a slow marquee with 2 scroll amount </marquee>
 

 Samples:
      This marquee has Scroll amount=6

      This marquee has Scroll amount=5

      This marquee has Scroll amount=4

      This marquee has Scroll amount=2