HTML Marquee with onMouseover and onMouseout event to stop and start scrolling text

Marquee Tag HTML Marquee tag Marquee Speed Marquee Behavior Marquee Direction Marquee Repeat

Since Marquee HTML tag gives us scrolling text in web pages we can use them for various purposes in our page design. One of the common use is scrolling news items in the web page which continuously display scrolling messages. We will learn how to stop this scrolling by placing Mouse pointer over this and again starts scrolling once the mouse is taken out of the scrolling area.

WE will be using OnMouseover and OnMouseout event triggers. To indentify the message div area we will assign one id value to it through getElementById. Here is the code to do this.

HTML marquee tag to stop and start scroll by using Mouse over and mouse out events in Div

<marquee 
    id="scroll_news" 
    style="font-family:Book Antiqua; color: #FFFFFF" 
    bgcolor="#000080">
    
    <div 
        onMouseOver="document.getElementById('scroll_news').stop();" 
        onMouseOut="document.getElementById('scroll_news').start();">
        
        News 1   News 2  News 3 News 4 ....... More news here
    
    </div>
</marquee>

News 1 News 2 News 3 News 4 ....... More news here

As you have seen the scrolling news stops when mouse pointer is kept over them and starts scrolling again when mouse is removed.

Marquee with mousedown and mouseup events

We can stop scrolling by clicking the mouse left button and holding it. On release of the button the scroll will start again.

News 1 News 2 News 3 News 4 ....... More news here

<marquee 
    id="scroll_news2" 
    style="font-family:Book Antiqua; color: #FFFFFF" 
    bgcolor="#000080">

    <div 
        onMousedown="document.getElementById('scroll_news2').stop();" 
        onMouseUp="document.getElementById('scroll_news2').start();">

        News 1   News 2  News 3 News 4 ....... More news here

    </div>
</marquee>

Adding Links to Scrolling text

Note that each item can be a different link to different pages or news links so let us try displaying each news item with hyper links to different pages. WE have kept links to different sections of the plus2net here.

<marquee 
    id="scroll_news" 
    style="font-family:Book Antiqua; color: #FFFFFF" 
    bgcolor="#000080">

    <div 
        onMouseOver="document.getElementById('scroll_news').stop();" 
        onMouseOut="document.getElementById('scroll_news').start();">

        <a href="../php_tutorial/site_map.php">
            PHP
        </a>  
        | 
        <a href="../sql_tutorial/site_map.php">
            SQL
        </a>  
        |  
        <a href="../">
            plus2net Home
        </a>

    </div>
</marquee>

PHP | SQL | plus2net Home

The same events can be triggered by onmouseup and onmousedown events

Starting and stopping scrolling text by using Start and Stop button

We will try to control the start and stop of the scrolling of marquee tag through one pair of buttons. We will connect start of scrolling to one button and stopping of scrolling to another button. Here is the code to do that.

<marquee 
    id="scroll_news2" 
    style="font-family:Book Antiqua; color: #FFFFFF" 
    bgcolor="#000080">
    News 1   News 2  News 3 News 4 ....... More news here
</marquee>

<input 
    type="button" 
    onClick="document.getElementById('scroll_news2').stop();" 
    value="Stop Scrolling"> 

<input 
    type="button" 
    onClick="document.getElementById('scroll_news2').start();" 
    value="Start Scrolling">

News 1 News 2 News 3 News 4 ....... More news here

Using single button

By adding a JavaScript function which takes care of label on the button and manage the stop or start action.

We will use getElementById to read the value and the Label on the button.

By using one if condition we will see if the button label ( value ) is Start then we will make it Stop and start the scrolling. Similarly if the label is Stop then we will make it Start and stop the scrolling.

News 1 News 2 News 3 News 4 ....... More news here

Here is the code

<marquee 
    id="scroll_news4" 
    style="font-family:Book Antiqua; color: #FFFFFF" 
    bgcolor="#000080">
    News 1 News 2 News 3 News 4 ....... More news here
</marquee>

<input 
    type="Button" 
    value="Stop" 
    id="b1" 
    onClick="button_click()">

<script language="JavaScript">
<!-- Begin
function button_click() {
    if (document.getElementById('b1').value == "Start") {
        document.getElementById('b1').value = "Stop";
        document.getElementById('scroll_news4').start();
    } else {
        document.getElementById('b1').value = "Start";
        document.getElementById('scroll_news4').stop();
    }
}
// End -->
</script>

HTML marquee Tag Number of times Marquee Scroll is Repeated Marquee Behavior: Scroll , Slide , alternate

Balaji	20-03-2013
Hay... This is amazing for bigiiners..!!! Thanks...!!!

gobolin	23-11-2014
hey guys, nice feature, but is there a way to have a single button to maybe on first click start a marquee and on second stop it, then start and stop and on and on? thanks :)

smo	26-11-2014
By adding JavaScript function it can be done. Example is added.

Muhammad hussain	06-04-2015
Its amazing work and i love it it is running nicely on my blog thanks for sharing

mantoo kumar	17-06-2016
This is very useful for begiiners. Nice

shukrab khan	01-07-2016
its just amazing some of marquee are not working in both browsers but its work for me in both. Thank you.

sekhar	20-06-2014
nice explanation

gidion	15-08-2014
something good

Joe	17-10-2014
Very Nice

swapnaja	03-08-2015
Nice One .Helpfull

Starting and stopping of scrolling by mouse over and mouse out

Marquee with mousedown and mouseup events

Adding Links to Scrolling text

Starting and stopping scrolling text by using Start and Stop button

Using single button