Html marquee tag and how to use marquee tag

Html marquee tag and how to use marquee tag

In this article we are discussing about Html marquee tag, use of html marquee, how can we use marquee in our web page and how it will be helpful for us.

HTML Marquee Tags Definition and Usage

  • HTML <marquee> is a scrolling text displayed either horizontally across or vertically down your web site page depending on the settings. This is created by using <marquees>.
  • HTML <marquee> tag is used to to get a scrolling text. As on the television you see the scrolling news headlines. You can do this by using the <marquee> tag.
  • HTML <marquee> tag also use to create a scrolling image from left to right, right to left, top to bottom, bottom to top. There is no limit. It’s user define choice.
  • HTML <marquee> tag is a Container tag to create scrolling text or image.
  • HTML <marquee> tag support some attributes. This attributes use to add more special effect and easy control.
AttributesValuesDescription
behavior“slide”scrollalternateStart 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”Define the background color of scrolling text.
direction“left””right””up”

“down”

Left to RightRight to LeftBottom to Top

Top to Bottom

width“size_px”Define width in marquee.
height“size_px”Define width in marquee.
loop“2””infinite”Loop Continues in limited times.Loop Continues in Infinite.
scrollamount“2”Define Speed to scroll on the text.
scrolldelay“2”Define time wait long before each marquee.
hspace“size_px”Define left or right margin for outside marquee.
vspace“size_px”define top or bottom margin for outside marquee.

Example : HTML Simple Marquee Tag.

 <html>
 <head>
    <title> HTML Simple Marquee Tag Examples </title>
 </head> 
 <body> 
 <!-- Now we are using Simple Marquee Tag -->
 <marquee> Simple Marquee Text </marquee>
 </body> 
 </html>

Output :
Simple Marquee Text

HTML Marquee Examples

Now we are represents some examples of marquee tag for you so let do some practical……

Example : HTML Side Touch Marquee Example

 <html>
 <head>
    <title> HTML Side Touch Marquee Example </title>
 </head>
 <body>
    <!-- Now we are using HTML Side Touch Marquee Example -->
	
	<marquee behavior="alternate" direction="left"> HTML Side Touch Marquee Example </marquee>

 </body>
 </html>

Output :
HTML Side Touch Marquee Example

Example : HTML Upside and Down Text Scrolling Marquee Example

 <html>
 <head>
    <title> HTML Upside and Down Text Scrolling Marquee Example </title>
 </head> 
 <body> 
    <!-- Now we are using HTML Upside and Down Text Scrolling Marquee Example -->
	
	<marquee behavior="scroll" direction="up"> HTML Upside and Down Text Scrolling Marquee Example </marquee>

 </body>
 </html> 

Output :
HTML Upside Text Scrolling Marquee Example
HTML Downside Text Scrolling Marquee Example

Example : HTML Speed Scrolling Marquee Example

 <html>
 <head>
    <title> HTML Speed Scrolling Marquee Example </title>
 </head>
 <body> 
    <!-- Now we are using HTML Speed Text Scrolling Marquee Example -->
	
	<marquee behavior="scroll" direction="left" scrollamount="2">
	HTML Slow Speed Text Scrolling Marquee Example </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="5">
	HTML Medium Speed Text Scrolling Marquee Example </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10">
	HTML Fast Speed Text Scrolling Marquee Example </marquee>


 </body>
 </html> 

Output :
HTML Slow Speed Text Scrolling Marquee Example
HTML Medium Speed Text Scrolling Marquee Example
HTML Fast Speed Text Scrolling Marquee Example

Example : HTML Image Marquee Example

 <html>
 <head>
    <title> HTML Image Marquee Example </title>
 </head>
 <body>
    <!-- Now we are using HTML Image Marquee Example -->
	
	<marquee behavior="alternate" direction="left"> <img src="http://phpkida.com/phpkida2.png"
	height="200" width="200" title="HTML Image Marquee Example" alt="HTML Image Marquee Example" />
	</marquee>

 </body>
 </html> 

Output :

HTML Image Marquee Example

Example : HTML Click To Stop Marquee Example

 <html>
 <head>
    <title> HTML Click To Stop Marquee Example </title>
 </head>
 <body> 
    <!-- Now we are using HTML Click To Stop Marquee Example -->
	
	<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">
	HTML Click To Stop Marquee Example </marquee>

 </body>
 </html> 

Output :

HTML Click To Stop Marquee Example

Example : HTML Mouse Hover Marquee Example

 <html>
 <head>
    <title> HTML Mouse Hover  Marquee Example </title>
 </head>
 <body> 
    <!-- Now we are using HTML Mouse Hover Marquee Example -->
	
	<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
	HTML Mouse Hover Marquee Example </marquee>

 </body>
 </html> 

Output :
HTML Mouse Hover Marquee Example

Example : HTML Mouse Hover Over The Marquee Slow Example

 <html>
 <head>
    <title> HTML Mouse Hover Over The Marquee Slow Example </title>
 </head>
 <body>
    <!-- Now we are using HTML Mouse Hover Over The Marquee Slow Example -->
	
	<marquee behavior="scroll" direction="left"
	onmouseover="this.setAttribute('scrollamount', 4, 0);"
	onmouseout="this.setAttribute('scrollamount', 8, 0);">
	HTML Mouse Hover Over The Marquee Slow Example </marquee>

 </body>
 </html> 

Output :
HTML Mouse Hover Over The Marquee Slow Example

Leave a Reply

Related Posts: You may like

html5 video tag Complete Guide

How to get multiple selected values of select box in php

Responsive contact form html css

How to increase size of radio button

Tools:

Crypto Currency

PHPKIDA provides free online the best real-time crypto market price, news, predictions, index with graphs & historical data for 2000+ coins including bitcoin, ethereum, & altcoins from major cryptocurrency exchanges.

Visite Tool

Icon Generator

PHPKIDA provides free online icon generator. Our icon generator help you to edit, modify, resize and customize icon for your website and applications. Convert to a shap you like add icon border, you can change icon border color, border size, background color, icon shadow, icons color, icon size in your own way and save it as a png image.

Visite Tool

Youtube Video Downloader

PHPKIDA provides Free online YouTube video downloader to download YouTube videos quickly in MP4, 3GP, and more. Search your video and free fast download youtube videos.

Visite Tool

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.