This page contains code that allows you to slow down your HTML marquee using your mouse. This means that your website visitors can slow down your HTML marquees with their mouse too.
Clicking the Marquee
This example allows the user to slow down the marquee when they click on it using their mouse (i.e. onmousedown). The marquee then returns to the regular speed when the user releases the mouse (i.e. onmouseup).
Hover Over the Marquee
This example allows the user to slow the marquee down when they hover over it (i.e. onmouseover). The marquee then continues when the user moves the cursor away from the marquee (i.e. onmouseout).
Using this example, the user doesn't need to click the mouse - they simply hover the cursor over the marquee.
You can add "Slower" and "Normal Speed" buttons that enable the user to slow down the marquee as required. To do this, simply add an "id" attribute to the marquee, then reference that from your buttons (created using the input tag).
Stop Your Marquee
Here are two easy ways to stop your marquee:
- You can stop your marquee simply by setting the
scrollamountto 0 (zero). For example, to stop the marquee on a mouseover, do this:
onmouseover = "this.setAttribute('scrollamount', 0, 0);"
- You can also stop your marquee by using
this.stop();. To see this code in action, see how to stop your marquee.
You can however, use the examples on the HTML Marquee Codes page.
More Marquee Tricks
Here are more tricks you can use with your marquees: