With MARQUEE we can add scrolling effect to text. Scrolling effect can be handy way to attract the users but too much using of it can spoil its purpose. Marquee can be used to add special announcement to a site, any special updates or advertisements. Before looking into MARQUEE example let's have a look at the list of attributes that it supports.
1)WIDTH: Tells how wide the marquee is. Can be set by pixel or percentage.
2)HEIGHT: Tells how tall the marquee is. Can be set by pixel or percentage.
3)DIRECTION: In which direction the marquee should scroll. Direction can have four values,
i)direction="left" - which is default.
Example:
<marquee direction="left" width="40%">Welcome to Arju's Blog</marquee>
effect is,
ii)direction="right" - which indicates that the marquee starts at the left and moves rightwards across the page.
Example:
<marquee direction="right" width="40%">Welcome to Arju's Blog</marquee>
effect is,
iii)direction="up" - scroll from down to up.
Example:
<marquee direction="up" width="40%">Welcome to Arju's Blog</marquee>
effect is,
iv)direction="down" - scroll from up to down.
Example:
<marquee direction="down" width="40%">Welcome to Arju's Blog</marquee>
effect is,
4)BEHAVIOR: How the contents will scroll.
i)BEHAVIOR=SCROLL - which is default, content scroll off the edge of the marquee area, then reappear on the other side.
ii)BEHAVIOR=SLIDE - It indicates that when the leading part content reaches the edge it should stop without scrolling off.
Example:
<marquee direction="left" behavior="slide" width="40%">Welcome to Arju's Blog</marquee>
effect is,
BEHAVIOR=ALTERNATE - It makes the content bounce back and forth, all of it remaining visible all the time.
Example:
<marquee direction="left" behavior="alternate" width="40%">Welcome to Arju's Blog</marquee>
effect is,
5)SCROLLDELAY: It sets the speed of scrolling. It sets amount of delay in milliseconds. By default it's value is 85 which means it displays the content, then delays 85 milliseconds and then displaying the content again in a new position.
If we want scrolling speed half a second then set SCROLLDELAY=500.
Example:
<marquee direction="left" SCROLLDELAY=500 width="40%">Welcome to Arju's Blog</marquee>
effect is,
If we want scrolling speed one second then set SCROLLDELAY=1000
Example:
<marquee direction="left" SCROLLDELAY=1000 width="40%">Welcome to Arju's Blog</marquee>
effect is,
6)SCROLLAMOUNT: It sets the speed of scrolling by setting how far to jump in pixels. A higher value for SCROLLAMOUNT makes the marquee scroll faster. The default value is 6.
An example by making the SCROLLAMOUNT to 18.
Example:
<marquee direction="left" SCROLLAMOUNT =18 width="40%">Welcome to Arju's Blog</marquee>
effect is,
Example by making the SCROLLAMOUNT to 30.
Example:
<marquee direction="left" SCROLLAMOUNT =30 width="40%">Welcome to Arju's Blog</marquee>
effect is,
7)LOOP: LOOP sets how many times the marquee should loop. It can have two types of value.
i)INFINITE ii)integer value in terms of number of loops.
By default, LOOP is INFINITE, which means that the marquee loops endlessly.
Following code will LOOP 3 times and then it stops.
Example:
<marquee direction="left" LOOP=3 width="40%">Welcome to Arju's Blog</marquee>
effect is,
Note that, if we use only LOOP attribute then content disappears after the last loop. If we want that the content will be visible after the looping is finished then we have to add BEHAVIOR SLIDE attribute like below.
Example:
<marquee direction="left" LOOP=3 behavior="slide" width="40%">Welcome to Arju's Blog</marquee>
effect is,
8)BGCOLOR: It sets the background color of the MARQUEE.
Example:
<marquee direction="down" bgcolor=pink width="40%">Welcome to Arju's Blog</marquee>
effect is,
9)HSPACE: HSPACE sets the horizontal space to the left and right of the marquee.
Following example shows the HSPACE by setting 30 and 50.
<MARQUEE HSPACE=30 WIDTH="40%" BGCOLOR=GREEN>
Welcome to <p> my blog
</MARQUEE>Next after HSPACE!
<MARQUEE HSPACE=50 WIDTH="40%" BGCOLOR=GREEN>
Welcome to <p> my blog
</MARQUEE>Next after HSPACE!
which looks like,
Next after HSPACE!
Next after HSPACE!
10)VSPACE: VSPACE sets the vertical space at the top and bottom of the marquee.
Following example demonstrate VSPACE by setting it 30 and 50.
Hi,
<MARQUEE VSPACE=30 WIDTH="40%" BGCOLOR=GREEN>
Welcome to my blog
</MARQUEE>Next after VSPACE!
Hi,
<MARQUEE VSPACE=50 WIDTH="40%" BGCOLOR=GREEN>
Welcome to my blog
</MARQUEE>Next after VSPACE!
which will look like,
Hi,
Next after VSPACE!
Hi,
Next after VSPACE!
The basic use of <MARQUEE ..> is simple. Put text between <MARQUEE ...> and </MARQUEE>.<MARQUEE ...> is a text level element. By default <MARQUEE ...> has a WIDTH of 100%, so it might appear as a block level. However, if you set the width to something smaller than 100%, you might notice that the marquee is in line with the surrounding text.
Related Documents
http://arjudba.blogspot.com/2009/08/how-to-increase-your-technorati.html
http://arjudba.blogspot.com/2009/07/how-to-setup-google-webmaster-tool-for.html
http://arjudba.blogspot.com/2009/06/how-to-get-targeted-backlinks-to-your.html
http://arjudba.blogspot.com/2009/07/draw-google-adsense-money-using-western.html
http://arjudba.blogspot.com/2009/06/different-types-of-web-hosting-services.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-yahoo-directory.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-google-directory.html
http://arjudba.blogspot.com/2009/12/how-to-know-when-googlebot-last-crawled.html
http://arjudba.blogspot.com/2009/12/how-to-add-different-meta-tags-to.html
http://arjudba.blogspot.com/2009/12/how-to-disable-or-remove-blogger.html
No comments:
Post a Comment