HTML
Marquee Tag
Definition and Usage
HTML <marquee> tag use to
create a scrolling text or scrolling image from left to right, right to left,
top to bottom, bottom to top. There is no limit. It’s user define choice.
<marquee> tag is a
Container tag to create scrolling text.
<marquee> tag support
following some attributes. This attributes use to add more special effect and
easy control.
Marquee Attributes
|
Attributes
|
Values
|
Description
|
|
behavior
|
"slide"
"scroll" "alternate" |
Start completely and stop as soon as text touches the margin.
Start completely and off one side. Text bounce as soon as touch both side margin. |
|
bgcolor
|
"Color_Code"
|
Specifies the background color.
|
|
direction
|
"left"
"right" "up" "down" |
Left to Right
Right to Left Bottom to Top Top to Bottom |
|
width
|
"size_px"
|
Specifies width in marquee.
|
|
height
|
"size_px"
|
Specifies height in marquee.
|
|
loop
|
"2"
"infinite" |
Loop Continues in limited times.
Loop Continues in Infinite. |
|
scrollamount
|
"3"
|
Specifies Speed to scroll on the text.
|
|
scrolldelay
|
"3"
|
Specifies time wait long before each marquee.
|
|
hspace
|
"size_px"
|
Specifies left or right margin for outside marquee.
|
|
vspace
|
"size_px"
|
Specifies top or bottom margin for outside marquee.
|
Marquee Tag Examples:
|
Marquee Examples
|
Side Touch
Margin Bounce Text:
Example-Code:
<marquee behavior="alternate"
direction="left">Side Touch Margin Bounce Text</marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Text</a></p>
<!-- Marquee Side Touch Margin Bounce Text by
Way2Tutorial.com -->
Upside
Text Scrolling:
Example-Code:
<marquee behavior="scroll"
direction="up">Upside Text Scrolling</marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Text</a></p>
<!-- Marquee Side Touch Margin Bounce Text by
Way2Tutorial.com -->
Marquee
Text Scrolling Speed:
Example-Code:
<marquee behavior="scroll"
direction="left" scrollamount="3">Slow Speed scroll
speed</marquee>
<marquee behavior="scroll"
direction="left" scrollamount="10">Medium Speed scroll
speed</marquee>
<marquee behavior="scroll"
direction="left" scrollamount="17">Fast Speed scroll
speed</marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Text</a></p>
<!-- Marquee Side Touch Margin Bounce Text by
Way2Tutorial.com -->
Side Touch
Margin Bounce Text:
Example-Code:
<marquee behavior="alternate"
direction="left"><img src="../jix/img_nat.png"
width="120" height="80" alt="Natural"
/></marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Image</a></p>
<!-- Marquee Side Touch Margin Bounce Text by
Way2Tutorial.com -->
Upside
Image Scrolling:
Example-Code:
<marquee behavior="scroll"
direction="up"><img src="../jix/img_nat.png"
width="120" height="80" alt="Natural"
/></marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Image</a></p>
<!-- Marquee Side Touch Margin Bounce Text by
Way2Tutorial.com -->
Change the
Scrolling Speed:
Example-Code:
<marquee behavior="scroll"
direction="left" scrollamount="5"><img
src="../jix/img_nat.png" width="120" height="80"
alt="Natural" /><p><a href="http://www.way2tutorial.com/html/html_marquee_tag.php">Slow
Speed scroll speed</a></marquee>
<marquee behavior="scroll"
direction="left" scrollamount="15"><img
src="../jix/img_nat.png" width="120" height="80"
alt="Natural" /><p><a href="http://www.way2tutorial.com/html/html_marquee_tag.php">Fast
Speed scroll
speed</a></marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Image</a></p>
<!-- Marquee Side Touch Margin Bounce Text by
Way2Tutorial.com -->
Click to
Stop Marquee:
Example-Code:
<marquee behavior="scroll"
direction="left" onmousedown="this.stop();"
onmouseup="this.start();">Click Here and hold the mouse marquee
stop</marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Start/Stop</a></p>
<!-- Marquee Start/Stop by Way2Tutorial.com -->
Hover to
Stop Marquee:
Example-Code:
<marquee behavior="scroll"
direction="left" onmouseover="this.stop();"
onmouseout="this.start();">Hower over and hold the mouse marquee
stop</marquee>
<p><a href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Start/Stop</a></p>
<!-- Marquee Start/Stop by Way2Tutorial.com -->
Start/Stop
Buttons:
Example-Code:
<marquee behavior="scroll"
direction="left" id="marquee1"><p>Press
Button</p></marquee>
<input type="button" value="Stop
Marquee"
onClick="document.getElementById('marquee1').stop();">
<input type="button" value="Start
Marquee"
onClick="document.getElementById('marquee1').start();">
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Start/Stop</a></p>
<!-- Marquee Start/Stop by Way2Tutorial.com -->
Click the
Marquee Slow:
Example-Code:
<marquee behavior="scroll"
direction="left" onmousedown="this.setAttribute('scrollamount',
3, 0);" onmouseup="this.setAttribute('scrollamount', 10,
0);">Click Here and hold the mouse marquee slow</marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Slow/Fast Text</a></p>
<!-- Marquee slow/fast by Way2Tutorial.com -->
Hover over
the Marquee Slow:
Example-Code:
<marquee behavior="scroll"
direction="left" onmouseover="this.setAttribute('scrollamount',
3, 0);" onmouseout="this.setAttribute('scrollamount', 10,
0);">Hower over and hold the mouse marquee slow</marquee>
<p><a href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Slow/Fast Text</a></p>
<!-- Marquee slow/fast by Way2Tutorial.com -->
Marquee
Slow/Fast Using Button:
Example-Code:
<marquee behavior="scroll"
direction="left" scrollamount="6"
id="marquee1">marquee slow/medium/fast speed using
button</marquee>
<input type="button" value="Slower"
onClick="document.getElementById('marquee1').setAttribute('scrollamount',
1, 0);">
<input type="button" value="Medium"
onClick="document.getElementById('marquee1').setAttribute('scrollamount',
5, 0);">
<input type="button" value="Faster"
onClick="document.getElementById('marquee1').setAttribute('scrollamount',
10, 0);">
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Slow/Fast Text</a></p>
<!-- Marquee slow/fast by Way2Tutorial.com -->
Multiple
Start/Stop Marquee:
Example-Code:
<marquee behavior="scroll"
direction="left" scrollamount="7"
id="marquee2"><p>Marquee 1</p></marquee>
<marquee behavior="scroll"
direction="left" scrollamount="15" id="marquee3"><p>Marquee
2</p></marquee>
<input type="button" value="Stop Marquee
1" onClick="document.getElementById('marquee2').stop();">
<input type="button" value="Start Marquee
1"
onClick="document.getElementById('marquee2').start();"><br
/>
<input type="button" value="Stop Marquee
2" onClick="document.getElementById('marquee3').stop();">
<input type="button" value="Start Marquee
2" onClick="document.getElementById('marquee3').start();">
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Multiple Start/Stop</a></p>
<!-- Marquee Start/Stop by Way2Tutorial.com -->
Marquee
Falling Text:
Example-Code:
<marquee
style="z-index:2;position:absolute;left:18px;top:97px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:200px;"scrollamount="3"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:1px;top:89px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:100px;"scrollamount="7"
direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:111px;top:7px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:302px;"scrollamount="4"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:225px;top:83px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:371px;"scrollamount="3"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:105px;top:53px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:317px;"scrollamount="2"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:168px;top:69px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:369px;"scrollamount="1"
direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:130px;top:117px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:289px;"scrollamount="7"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:176px;top:57px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:78px;"scrollamount="7"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:16px;top:57px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:56px;"scrollamount="5"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:300px;top:86px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:194px;"scrollamount="2"
direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:292px;top:10px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:251px;"scrollamount="6"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:278px;top:74px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:154px;"scrollamount="1"direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:241px;top:72px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:82px;"scrollamount="3"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:276px;top:32px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:70px;"scrollamount="8"
direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:272px;top:15px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:334px;"scrollamount="11"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:90px;top:38px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:167px;"scrollamount="7"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:275px;top:108px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:375px;"scrollamount="7"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:22px;top:76px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:12px;"scrollamount="7"
direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:89px;top:54px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;"scrollamount="2"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:26px;top:72px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;"scrollamount="1"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:3px;top:44px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:130px;"scrollamount="3"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:300px;top:108px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:375px;"scrollamount="7"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:335px;top:76px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:125px;"scrollamount="7"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:400px;top:54px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;"scrollamount="2"
direction="down">Way2Tutorial.com</marquee>
<marquee
style="z-index:2;position:absolute;left:355px;top:72px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;"scrollamount="1"
direction="down">Way2Tutorial.com</marquee>
<marquee style="z-index:2;position:absolute;left:380px;top:44px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:375px;"scrollamount="3"
direction="down">Way2Tutorial.com</marquee>
<p><a
href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee
Falling Text</a></p>
<!-- Marquee slow/fast by Way2Tutorial.com -->
No comments:
Post a Comment