Personal Space Workshop - Marquees
Created | Updated Apr 9, 2004
Marquee tags are used to make text and pictures move. This tag does not operate on all browsers, and in such cases the object will still be visable, it just won't move. Simple marquees are simple to use, this part of the Workshop aims to demonstrate.
For the example, the following text and smiley is used...
This is an example of a marquee
The code for this being
Changing the direction of movement
Writing the opening tag <MARQUEE> and the closing tag of </MARQUEE> at either end of what you wish to move will by default cause it to slide across the screen from the right hand side to the left, like this...
This is an example of a marqueeTo make the marquee move in the opposite direction, you need to add DIRECTION="right" to the opening tag, like this...
The result being this...
This is an example of a marqueeUsing the same method, marquees can go
Up...
This is an example of a marquee...and down
This is an example of a marqueeHeight and width
The previous examples showed the presets as to what width and height a marquee will move in. This can be altered by adding WIDTH and HEIGHT to the opening tag.
Here the width has been limited to 50%, the preset being 100%, i.e. the entire width of the screen
This is an example of a marqueeIn this example, the height has been limited to 30 pixels
This is an example of a marqueeBehaviour
You can change the way in which the marquee moves by adding BEHAVIOR to the opening tag, notice the Amercican spelling. Here are a few examples of this..
Alternate
This will make the marquee 'bounce' in the direction stated on the DIRECTION part of the tag. For example...
This is an example of a marqueeScroll
Scroll is preset in the marquee tag anyway, so does not need to be added. All it means is that the text or picture will scroll across the page. For example...
This is an example of a marqueeSlide
This attribute makes the marquee only perform one 'cycle', and then it doesn't move again until the page is refreshed. For example...
This is an example of a marqueeNotice how the marquee freezes on the left hand side of the screen?
Speed
You can alter the speed at which the marquee scrolls across the page. Marquees can either be sped up by using SCROLLAMOUNT, or slowed down by using SCROLLDELAY.
Speeding up
SCROLLAMOUNT is the numver of units the marquee jumps for each base unit of time. By addingSCROLLAMOUNT to the opening tag, you can specify what speed you want the make your marquee scroll. Below are a few examples...
Speed | Example | Code |
2 | 2 | |
5 | 5 | |
10 | 10 |
Slowing down
SCROLLDELAY defines the base unit of time before the marquee jumps a certain number of pixels. SCROLLDELAY can therefore be used to define how much slower you'ld like the marquee to scroll.
Speed | Example | Code |
200 | 200 | |
500 | 500 | |
1000 | 1000 |
SCROLLAMOUNT with SCROLLDELAY
SCROLLAMOUNT and SCROLLDELAY can be used in combination. If both are high then the result will be a blinking effect.
Looping
Loop is how many cycles a marquee will go through before stopping. When LOOP is used, the marquee will cycle the set amount of times, and then dissappear until the page is refreshed. For example...
To refresh this page, you could use this link, and then watch how many times the marquee loops...
This is an example of a marquee...which should be 5.
Back Ground Colour
BGCOLOR allows you to add a colour to the back ground of your marquee. Here, yellow is chosen..
This is an example of a marqueeThe code for this being..
...just the same as for adding a back ground colour in tables.
Adding more marquees
For a very complex marquee, you could try putting marquee tags inside of marquee tags. The possibilities for the different ways the marquee will turn out are huge, so below are a few examples of the different effects, the code given for each.
This is an example of a marqueeThis is an example of a marqueeThis is an example of a marqueeAnd to go out with a bang...
For another look on marquees, you could try the Edited Guide Enty A Study of the Marquee Tag in Guide ML
Back to the Personal Space Workshop