Slow Down Marquee
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.
Browser Compatibility
The marquees on this page use the non-standard <marquee> tag, as well as JavaScript to slow the marquee. If the following examples don't work for you it's likely that your browser doesn't support this functionality. For standards-compliant code, it is recommended that you use CSS marquees wherever possible.
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.
Using Buttons:
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.
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties