Lesson 5: Making text and images to move in HTML by using Marquee tag

Websites are becoming more attractive and interactive nowdays. Manytimes we see some moving text or images. In this lesson we will learn how can text or images can be shown moving on a webpage.
HTML provides a tag called 'MARQUEE' which can be used to show moving objects.

Please note that Marquee tag is known to be a non-standard tag because it makes the text to move and sometimes it becomes distracting. Hence some browsers don't support it partially or completely, so you should use it such that it don't become distracting to the user. At the end(in the last point) of the page you will also get a tip to make it reader friendly.

• <marquee></marquee> :- Any text or image between these tags will move. For example:
  This Text Moves
  
  
We can also set direction for the marquee by using 'DIRECTION' tag.

• <marquee direction=""></marquee> :- The value of direction can be given left, right, up or down. By default it is left. For example:-<marquee direction="up">This text moves up like a latest news section on a website</marquee>


It looks very attractive. Now lets look how the width and height of the marquee section can be adjusted.


• <marquee height="50" width="50"></marquee> :- This tag gives a desired height and width to the marquee section. For example:- <marquee height="80" width="100" direction="up">This TEXT goes in 100 x 80 space</marquee>


The text looks very attractive while moving. Now lets see an image in marquee.



• <marquee bgcolor=""></marquee> :- This tag is used to give a coloured background to the marquee.<marquee bgcolor="#FF0000" width="400">Marquee Text With Red Background</marquee>



• The speed of the marquee can be easily changed according to the need by using 'ScrollDelay' and 'ScrollAmount' tags.
  1. ScrollDelay tag:- ScrollDelay is used to define the delay between each movement of the marquee. For example:-
     ScrollDelay="20" ScrollDelay="200"
     
     Lesser the value of ScrollDelay faster the speed of marquee and vice-versa.
  
  
  
  2. ScrollAmount tag:- ScrollAmount is used to define the amount of scrolling between each movement of the marquee. For example:-
     ScrollAmount="5" ScrollAmount="25"
     
     More the value of ScrollAmount faster the speed of marquee and vice-versa.
     
     
• 'Behavior' tag :- Behavior tag in marquee makes the marquee to attain different style of movement. Behavior tag has three values 'Alternate', 'Scroll' and 'Slide'. Please note that Behavior tag is not completely supported by some of the web browsers.
  1. Behavior="Alternate": This makes the text to bounce.(Not Supported By Many Browsers)Alternate Marquee Behavior
  2. Behavior="Scroll": This is the behavior by default.Scroll Marquee Behavior
  3. Behavior="Slide": This make the text or image to scroll just once. Refresh/reload the page to see it moving again.Slide Marquee Behavior



• As we know that marquee can sometime become eye distracting, so a tip to use it in a proper way can be to make it stop when the mouse cursor is on it and make it move again when the mouse cursor is not over it. This can be done by using the code- <marquee onMouseOver="this.stop()" onMouseOut="this.start()"></marquee>. Now move your cursor to the image it will stop and move the cursor out of it, it will start moving again.

So here we learn about marquee tag. Please don't forget to always close this tag like </marquee> because unclosed marquee tag behaves improperly.

For more lessons of HTML Click Here.