Tutorial ©Copywright The Terminator. Do not use without permission.
This will help you to cover the basics of marquees.
Chapter 1: The marquee
<marquee>Text Here</marquee>This wll make a marquee, like this:
Chapter 2: The direction
<marquee
direction="up">Text here</marquee>
This'll make the marquee go in a paticular direction: up, down or right.
Chapter 3: The width
<MARQUEE
WIDTH="20%">Text</marquee>
This will make the marquee scroll 20% of the page. You can change the width from 1% to 100%, or use numbers (measured in px).
Chapter 4: The height
<MARQUEE DIRECTION="up"
HEIGHT="60%">
This basically moves the marquee up 60% of the page. Measurements are same as above.
Chapter 5: Behaviour
<MARQUEE
BEHAVIOR="SLIDE">
It will move the teext to side and then, stop scrolling.
Can lso use ALTERNATE, which will make to marquee bounce back and forth.
Chapter 6: Scrolldelay
<MARQUEE
SCROLLDELAY="500">
This will make the marquee go slower that usual. It will move every x milliseconds where x indicates the number you used.
Chapter 7: Scrollamount
<MARQUEE
SCROLLAMOUNT="20">
This wil make to marquee move faster. 20 can be changed. The default value is 6.
Chapter 8: Loop
<MARQUEE
LOOP="2">
This will make the marquee text dissappear after two scrolls.
To make the text visible after looping:
<MARQUEE
LOOP="2" BEHAVIOR="SLIDE">
Please revise Chapters 1-8 before going on.Chapter 9: BGColor
<MARQUEE
BGCOLOR="GREEN">
Will make the marquee text flow over a green BackGround.
Chapter 10: Onmouseover and Onmouseout
<MARQUEE
onMouseover=this.stop()>
This will make the marquee stop after you move your mouse over it. How do we start it again?
<MARQUEE
onMouseout=this.start()>
But that doesn't make sense. If you move your mouse over it, what'll it do?
<MARQUEE
onMouseover=this.stop() onMouseout=this.start()>
Now this makes sense
How do we do it vice-versa?
<MARQUEE
onMouseover=this.start() onMouseout=this.stop()>
PLEASE READ BEFORE PROCEEDING: CHAPTERS 1-10Chapter 11: HSpace and VSpace
Get ready for your last tutorial!
<MARQUEE
HSPACE="50" WIDTH="25%" BGCOLOR="WHITE">
Hi<P>
You're awesome
</P>
</MARQUEE>
This [must] have the BGColor tag, or it'll have no use.
Unlike the height tag, this will show the background the same size chosen.
<MARQUEE
VSPACE="50" BGCOLOR="YELLOW">
This is
just lke the width tag, except it's more accurate. No explanation needed.
Chapter 12:
??
You're done!
No more in the basics! But there is advanced. But not so soon! Thanks a lot for taking your time to read this!
Too tough?
This'll require copywright, but ok! It basiccally gives you a marquee with all the properties except xSpace.
<script type="text/javascript">
/**************************
*Marquee Generator
*By The Terminator: http://thepokeforums.proboards79.com
*You may remove this copywright if you want....
*Besides, it's only a marquee script
***************************/
//Configure here\\
var Direction="LEFT" //The direction of the marquee
var Width="100%" //The width of the marquee
var Height="20%" //The height of the marquee
var Behave="SCROLL" //The behaviour of the marquee
var Scroll="SCROLLAMOUNT" //You may use scrollamount or scrolldelay
var Timeofscroll="6" // Scolldelay in milliseconds, scrollamount speed.
var Loop="2" //The looping time. Set behaiour to slide to preview after looping.
var Bgcolor="#FFFFFF" // The BGColor
var onMouseover="this.stop()" //What do you wan't onMouseover? this.stop() or this.start()
var onMouseout="this.start()" //What do you wan't onMouseout?
var Text="Text here!" //What you want to use as your text.
/*||||||||||||||||||Don't edit below this line.|||||||||||||||||||||||||*/
document.write("<marquee direction=" + Direction + " width=" + Width + " height=" + Height + " behavior=" + Behave + " " + Scroll + "=" + Timeofscroll + " loop=" + Loop + " bgcolor=" + Bgcolor + " onMouseover=" + onMouseover + " onMouseout=" + onMouseout + >" + Text + "</marquee>")
</script>
Thanks,
The Terminator~last edit: Made a mistake with this.start() [typed it as thiss.tart()].
~last edit: missed out the quotes.
~last edit: added the code.
~last edit: edited the code a little bit.
~last edit: spelling-error.
~last edit: copywright.
Last Edit: Feb 16, 2006 14:37:59 GMT by Elite Charizard