Mouse Hover Marquee

Read Part-1 Tutorials : Make Interactive Webpage Using Marquee

To Provide Start and Stop and other dynamic functionality in  Marquee, we have to call any event like onMouseover, onClick, onMouseDown using a inline JavaScript. Don`t think it is a big task. Its a simple inline JavaScript code to call these event to control the movement of Marquee tags element.

1. Mouse Hover Marquee  

In this, whenever User mouser over at Marquee, it slow the speed of marquee element.

Your Hover Marquee Text

<marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">Your Hover Marquee Text</marquee>

you can change onmouseover scrollamount  time for slow and fast speed.

2. onClick Marquee Speed Control

In this, whenever user click on the marquee text, it slow the speed of marquee text.

Your onClick Marquee Text

<marquee behavior="scroll" direction="left" onmousedown="this.setAttribute('scrollamount', 12, 0);" onmouseup="this.setAttribute('scrollamount', 0, 0);" scrollamount="12">Your onClick Marquee Text</marquee>

3. Using Buttons 

In this you can add start and stop button to control the Marquee element.

Button Controls in Marquee

<marquee id="mrk" behavior="scroll" direction="left" scrollamount="10" >
<p>Button Controls in Marquee</p>
</marquee>
<input type="button" value="Slower Speed" onClick="document.getElementById('mrk').setAttribute('scrollamount', 1, 0);">
<input type="button" value="Normal Speed" onClick="document.getElementById('mrk').setAttribute('scrollamount', 10, 0);">
<input type="button" value="Faster Speed" onClick="document.getElementById('mrk').setAttribute('scrollamount', 20, 0);">

For controlling the Speed we use Marquee scrollamount attribute which is a best way to control the speed. For Stop we used '0' seconds while there is another way to do this by call "this.stop()" for stop the marquee and "this.start()" for start the scrolling the marquee element.

Real Time Uses

Now, you are ready to develop some real time awesome tools for your blog. Here I am showing how to create snow fall widget in your website using Marquee.

Code of this widget :-

<div class="pbt-marquee-code" style="height:400px;position:relative;">
<marquee style="z-index:2;position:absolute;left:186px;top:84px;height:447px;"direction="down">
<img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" />
</marquee>
<marquee style="z-index:2;position:absolute;left:280px;top:14px;height:366px;"scrollamount="1" direction="down">
<img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" />
</marquee>
<marquee style="z-index:2;position:absolute;left:10px;top:62px;height:38px;"scrollamount="6" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:155px;top:82px;height:299px;"scrollamount="6" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:7px;top:18px;height:284px;"scrollamount="3" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:224px;top:23px;height:257px;"scrollamount="2" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:293px;top:9px;height:63px;"scrollamount="6" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:84px;top:110px;height:432px;"scrollamount="3" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:236px;top:71px;height:180px;"scrollamount="3" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:310px;top:37px;height:209px;"scrollamount="3" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:206px;top:92px;height:52px;"direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:96px;top:7px;height:48px;"scrollamount="5" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:241px;top:13px;height:159px;"scrollamount="6" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:287px;top:83px;height:270px;"scrollamount="1" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:123px;top:75px;height:300px;"scrollamount="5" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:223px;top:14px;height:305px;"scrollamount="2" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:105px;top:113px;height:259px;"scrollamount="5" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:183px;top:64px;height:99px;"scrollamount="2" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee>
</div>

I hope, you enjoyed a lot with this series and will develop more interactive web pages using Marquee. :)