Scrolling tutorial

by larme d'ange December 18th 2005, 9:44 pm

Scrolling tutorial

These code are to be put on a portal block, on the homepage message, or also in a forum description.
Once in the edition of one of them, click on the <> button, on the top right of the text field, to pass in HTML mode.

Name of the scroll tag : marquee

The different attribute of this tag :
id : identifier,
scrolldelay : time in milliseconds between each moving,
scrollamount : distance in pixel between each moving,
height, width : height and widht in pixel of the scrolling windows,
direction : direction of the scroll
:: UP => from down to up,
:: DOWN => from up to down,
:: LEFT => from right to left [as default],
:: RIGHT => from left to right.
behavior : behavior of the scroll
:: ALTERNATE => in alternate
:: SCROLL => scroll [as default],
:: SLIDE => slide from one side to another.
loop : number of scrolling - if not specified => loop to infinite [as default]

In our case, the attribute behavior and loop don't have any interest if we just do scrolling...

Theory is over, let us pass now to practice and here are a few useful codes :
/!\ What appeear in red : your text, your pictures, your links
/!\ What appear in green : the name of the identifier which have to be the same

==> A simple scroll of text :

<marquee>YOUR TEXTE HERE</marquee>

==> A simple scroll of picture - horizontal (  <=> space):

<marquee><img src="http://URL_image1"></img> <img src="http://URL_image2"></img> <img src="http://URL_imageN"></img></marquee>

==> A simple scroll of picture - vertical ( <=> jump of line):

<marquee direction="up"><img src="http://URL_image1"></img> <img src="http://URL_image2"></img> <img src="http://URL_imageN"></img></marquee>

/!\ According to whether you make images scroll horizontally or vertically, don't forget to insert &nbsp or ; it won't be indicated later but don't forget !

==> scroll of pictures with links (partners ) :

<marquee><a href="http://URL_link1" target="_blank"><img src="http://URL_image1"></img></a><a href="http://URL_link2" target="_blank"><img src="http://URL_image2"></img></a><a href="http://URL_linkN" target="_blank"><img src="http://URL_imageN"></img></a></marquee>

==> Scroll wich stops and restarts again at the time of the passage of the mouse :
1st version -- the scroll stop when the mouse passes on the field of scroll :

<marquee onmouseover="this.stop();" onmouseout="this.start();">YOUR TEXT or IMAGES</marquee>

2nd version -- the scroll stop when the mouse passes on one element:
For the text :

<marquee id="id1">YOUR TEXT or IMAGES</marquee>

For the pictures :

<marquee id="id1"><img src="http://URL_image1" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img><img src="http://URL_image2" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img><img src="http://URL_imageN" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img></marquee>

For pictures with links on :

<marquee id="id1"><a href="http://URL_link1" target="_blank"><img src="http://URL_image1" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img></a><a href="http://URL_link2" target="_blank"><img src="http://URL_image2" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img></a><a href="http://URL_linkN" target="_blank"><img src="http://URL_imageN" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img></a></marquee>

It is now possible to customize the scroll of your text :
In the marquee tag, we just need to add this code :
style="ATTRIBUTE of STYLE: VALUE;"
Various attributes of style :
:: HEIGHT and WIDTH for the height and width of scroll,
:: BACKGROUND-COLOR to modify the colour of background,
:: BACKGROUND : URL('http://URL_background_image'); BACKGROUND-ATTACHMENT: FIXED; to put a fixed background image,
:: COLOR to change the text colour,
:: FONT-SIZE to change the text size,
:: TEXT-ALIGN to modify the text alignement (LEFT, RIGHT, CENTER ou JUSTIFY)

There is many other styles to applicate, but there, You have to search by yourself...

Written by the friendly SanDream

that's all folks

corrections by Katt