SQL PHP HTML ASP JavaScript articles and free scripts to download
HTML Marquee

Starting and stopping of scrolling by mouse over and mouse out

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.

<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. 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>

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

Number of User Comments : 2


Google+
Balaji20-03-2013
Hay...



This is amazing for bigiiners..!!!



Thanks...!!!

sekhar20-06-2014
nice explanation
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer