Return To The Theatre


TIPS & TRICKS MENU:
Fun With Marquees     Fun With Links     Fun With HTML
Fun With Sidebars     Fun With Tables     Fun With Fonts

Fun With Marquees

To make a standard word marquee, simply type the following code:
<marquee>TEXT</marquee>
This will make the text do this:
TEXT



You can add color attributes to your text, along with bold, size, italic, etc.
Using this code:
<marquee><font color=red size=3><b>TEXT</b></font></marquee>
Will make the marquee text do this:
TEXT



If you do not want your marquee text/image to scroll the entire length of the page, you can assign a WIDTH attribute to the code.
Using a width attribute such as this one:
<marquee width=200>TEXT</marquee>
Will make the marquee text do this:
TEXT



Again, you can assign other text attributes.
Entering in this code:
<marquee width=200><font color=red><b><i>TEXT</i></b></font></marquee>
Will make the marquee text do this:
TEXT
You can set the width to how ever long you want it to scroll. In this example, i used 200 as the width.



By changing TEXT to an IMAGE, you can make an image do the same things in your marquee.
Using this image code:
<marquee><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will make the marquee image do this:




You can set a width attribute for image marquee's too. Using this code:
<marquee width=200><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will make the image marquee do this:




You can also change the direction a marquee will go by simply adding a direction attribute.
This: <marquee direction=left>TEXT</marquee>
Will give you this:
TEXT



This: <marquee direction=right>TEXT</marquee>
Will give you this:
TEXT



This: <marquee width=200 direction=left>TEXT</marquee>
Will give you this:
TEXT



This: <marquee width=200 direction=right>TEXT</marquee>
Will give you this:
TEXT



Again, you can add your own code for color, size, bold, etc.



If you'd like to make an image marquee scroll the direction you want it to, then use the following codes:
This: <marquee direction=left><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will give you this:




This: <marquee direction=right><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will give you this:




This: <marquee width=200 direction=left><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will give you this:




This: <marquee width=200 direction=right><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will give you this:




You can make text or image marquees go back and forth by using a behavior attribute. The behavior attribute that will make text or images go back and forth is the ALTERNATE code. You will place this code in your marquee command as well.
Using this: <marquee behavior=alternate>TEXT</marquee>
Will make the text do this:
TEXT



It works best by using the width attribute:
<marquee width=200 behavior=alternate>TEXT</marquee>
Will give you this:
TEXT



You can use the behavior attribute with images as well.
This: <marquee behavior=alternate><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will give you this:




and this: <marquee width=200 behavior=alternate><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
will give you this:




You can use a background color that your image or text will marquee across by simply adding a background attribute to the marquee code.
This: <marquee bgcolor=orange>TEXT</marquee>
Will give you this:
TEXT



This: <marquee bgcolor=orange><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will give you this:




This: <marquee width=200 behavior=alternate bgcolor=orange>TEXT</marquee>
Will give you this:
TEXT



This: <marquee width=200 behavior=alternate bgcolor=orange><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will give you this:




You can also make a marquee go up and down, and not only right or left. Simply by using the UP or DOWN code in the direction attribute.
This: <marquee direction=up>TEXT</marquee>
Will give you this:
TEXT



This: <marquee direction=down>TEXT</marquee>
Will give you this:
TEXT



Now, if you think that the height of the up or down marquee is too big or too small, then simply add a HEIGHT attribute to the code, just like you did the width attribute.
This: <marquee height=50 direction=down>TEXT</marquee>
Will give you this:
TEXT



This: <marquee height=50 direction=up>TEXT</marquee>
Will give you this:
TEXT



Again, the same applies for images.
This: <marquee height=50 direction=up><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will make this:




This: <marquee height=50 direction=down><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
Will make this:




Want it to go up and down?
Then do this: <marquee height=50 behavior=alternate direction=up><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>
To make this:




Or this: <marquee height=50 behavior=alternate direction=up>TEXT</marquee>
To make this:
TEXT



Marquees run at a standard speed. You can also make the image or text move as fast or as slow as you'd like it to by simply adding a SCROLLAMOUNT attribute to the marquee code. The higher you set the scrollamount, the faster your marquee will scroll.
This: <marquee scrollamount=2>TEXT</marquee>
Will give you this:
TEXT



This: <marquee scrollamount=4>TEXT</marquee>
Will give you this:
TEXT



This: <marquee scrollamount=7>TEXT</marquee>
Will give you this:
TEXT



This: <marquee scrollamount=15>TEXT</marquee>
Will give you this:
TEXT



This: <marquee scrollamount=25>TEXT</marquee>
Will give you this:
TEXT



This: <marquee scrollamount=35>TEXT</marquee>
Will give you this:
TEXT



This: <marquee scrollamount=50>TEXT</marquee>
Will give you this:
TEXT



This: <marquee scrollamount=75>TEXT</marquee>
Will give you this:
TEXT



You can combine different attributes and marquees to make up one really nifty marquee, which would resemble a bouncing or floating text/image. But you have to be careful not to give the back to back marquees confusing attributes, or your marquee will look all funky.
Using this: <marquee behavior=alternate direction=up width=200 height=50><marquee behavior=alternate direction=right>TEXT</marquee></marquee>
Will give you this:
TEXT



And this: <marquee behavior=alternate direction=up width=200 height=50><marquee behavior=alternate direction=right><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee></marquee>
Will give you this:




You can combine marquees back to back in order to make weird effects.
The splitting effect:
<marquee width=100 direction=left>TEXT</marquee><marquee width=100 direction=right>TEXT</marquee>
TEXTTEXT



The crashing effect:
<marquee width=100 direction=right>TEXT</marquee><marquee width=100 direction=left>TEXT</marquee>
TEXTTEXT



The splitting effect with color:
<marquee width=100 direction=left bgcolor=orange>TEXT</marquee><marquee width=100 direction=right bgcolor=pink>TEXT</marquee>
TEXTTEXT



The crashing effect with color:
<marquee width=100 direction=right bgcolor=orange>TEXT</marquee><marquee width=100 direction=left bgcolor=pink>TEXT</marquee>
TEXTTEXT



And the same goes with images...
The splitting effect:
<marquee width=100 direction=left><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee><marquee width=100 direction=right><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>




The crashing effect:
<marquee width=100 direction=right><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee><marquee width=100 direction=left><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>




The splitting effect with color:
<marquee width=100 direction=left bgcolor=orange><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee><marquee width=100 direction=right bgcolor=pink><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>




The crashing effect with color:
<marquee width=100 direction=right bgcolor=orange><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee><marquee width=100 direction=left bgcolor=pink><img src="http://www.krazy-kreations.com/images/babies/0059.gif"></marquee>




And there you have it. Just about everything you wanted to know about marquee's, and then some. Enjoy!!




Copyright 2006 Krazy-Kreations
The information on this page, including source code and layout, may not be reproduced or republished, in whole or in part, on another webpage or website without the written consent from the owner of krazy-kreations. You are free to download and save any of the graphics on this site for your own personal use, but no form of hotlinking to any of the images on this host is allowed. This website is protected under the United States Copyright Law. This website and all of my work is also licensed with Creative Commons. Many of the graphics found on this site are copywritten by other artists, and are part of my personal collection. These graphics are not to be included in any collections with the intent to buy and sell them. Not for commercial use. If you wish to quote any material from this website, a link to this site must be present along with the quoted material.


web site hit counter