Starting and stopping of scrolling by mouse over and mouse out
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>
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.<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>
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'>
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.
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
This article is written by plus2net.com team.
| Balaji | 20-03-2013 |
| Hay... This is amazing for bigiiners..!!! Thanks...!!! | |
| sekhar | 20-06-2014 |
| nice explanation | |
| gidion | 15-08-2014 |
| something good | |
| Joe | 17-10-2014 |
| Very Nice | |
| 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 | |
| swapnaja | 03-08-2015 |
| Nice One .Helpfull | |
| 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. | |
| pranati | 24-08-2016 |
| Nice One .Helpfull | |
15-05-2021 | |
| Wow Bro Your Animation is Very Helpfull | |