Marquee Tag Examples with JavaScript Stop & Start Events

By | May 14, 2013
Marquee tag is an HTML element which is used for scrolling and sliding a text or paragraph. Also you can use it for links and images. This is very easy to use tag and you can add some functionality inside it by using a few codes of JavaScript.
Marquee tag has many attributes. Marquee tag can be used anywhere in the website. You can use it on Blogger, WordPress or any other platform. For offline practice you can take a look at my examples in this article later on.
Marquee tag has following attributes: Behaviour, Direction, BGcolor, scrollamount, scrolldelay, Loop, Height, Width and some extra attributes which are used by Advance users. However, we can use other tags to design our marquee text such as Font tag. We will use all these attributes in below examples.

Marquee Tag Examples

Now lets start seeing the Marquee tag with live examples, below is the simple text and marque tag also you will find the code for that marquee.

Don’t Miss: Complete HTML Video Course

This is Example 1:
This is my Marquee

Now Here is the code of above example:

<marquee behavior=”alternate” bgcolor=”yellow”>This is my Marquee</marquee>


Example 2:
This is another marquee Example

The code of above example:

<marquee bgcolor=”pink” behavior=”slide” loop=”3″ direction=”right” scrollamount=”20″>This is another marquee Example</marquee>


Example 3:
this is third example with more options

Code of above example:

<marquee behavior=”scroll” bgcolor=”orange” scrollamount=”4″ direction=”up” height=”100″ width=”220″> this is third example with more options</marquee>


Example 4:
this is fourth example with more options

Code of above example:

<marquee behavior=”scroll” bgcolor=”orange” scrollamount=”4″ direction=”down” height=”150″ width=”300″> this is third example with more options</marquee>


Using Marquee for Links:
Learn HTML in Urdu   PHP in Urdu   Complete SEO Course

Code for above Example:

<marquee behavior=”scroll” scrollamount=”10″><a href=”http://www.onlineustaad.com” target=”_blank”>Learn HTML in Urdu</a>&nbsp;&nbsp;&nbsp;<a href=”http://www.onlineustaad.com” tartget=”_blank”>PHP in Urdu</a>&nbsp;&nbsp;&nbsp;<a href=”http://www.onlineustaad.com” target=”_blank”>Complete SEO Course</a></marquee>


Images in Marquee Tag:

Code for above example:

<marquee direction=”right”><img height=”100″ src=”//3.bp.blogspot.com/-EIjkG2yWVfU/T3S_dujt00I/AAAAAAAAWhA/GDK0hfS0Zkk/s320/Downloads-in-Urdu.jpg” width=”150″ /><img height=”100″ src=”//3.bp.blogspot.com/-EIjkG2yWVfU/T3S_dujt00I/AAAAAAAAWhA/GDK0hfS0Zkk/s320/Downloads-in-Urdu.jpg” width=”150″ /><img height=”100″ src=”//3.bp.blogspot.com/-EIjkG2yWVfU/T3S_dujt00I/AAAAAAAAWhA/GDK0hfS0Zkk/s320/Downloads-in-Urdu.jpg” width=”150″ /></marquee>

How to Use JavaScript inside Marquee Tag?

Now this is time to use JavaScript inside Marquee Tag. By adding a few codes of JavaScript we can stop this marque on mouse hovering. And if we out the mouse the slide will play itself.

Example of Stop onovermouse Marquee Tag by Using JavaScript:

This is simple text, hover mouse and see the result

Code for above example:

<font size=”8″ color=”red”><marquee behavior=”scroll” onmouseout=”this.start();” onmouseover=”this.stop();”>This is simple text, hover mouse and see the result</marquee></font>

Marquee tag is useful when you want to update the users with a breaking news or something like announcements. It can be used on all platforms, and it is also supported by HTML5.

So If you have further questions then let us know by commenting on this post.

3 thoughts on “Marquee Tag Examples with JavaScript Stop & Start Events

Speak Your Mind