Scripting the marquee
The thing to realize when it comes to scripting the <marquee> is simply that all of it's attributes are read/write, ready to change at a moment's notice from JavaScript. However, since only IE 4+ recognize these attributes as JavaScript properties, remember to add browser detection code when accessing them. Ok, to conclude this tutorial, here are a couple of examples illustrating the interaction between <marquee> and JavaScript.
-Marquee that slows down when the mouse is over
Here's a regular marquee with a useful twist- it slows down for the user to better interact when the mouse is over it:
Source Code:
<marquee onMouseover="this.scrollAmount=3" onMouseout="this.scrollAmount=6">Scrolling text here. Scrolling text here</marquee>
The scrollAmount property is used here to manipulate the marquee's speed, depending on where the mouse is.
-Marquee with start/stop button
Why not give your visitors the ability to determine for themselves when the marquee should scroll and not scroll?
Source Code:
<marquee id="scroller"
direction=up width=150 height=150
style="background-color:lightyellow;border:1px solid black">Marquee contents
here. Marquee contents here...</marquee><br>
<a href="javascript:scroller.start()">Start</a> | <a
href="javascript:scroller.stop()">Stop</a>
<script>
if (document.all)
scroller.stop()
</script>
The start/stop button above are constructed using the marquee's default start() and stop() methods. Also, the later method is accessed directly to halt the initial scrolling of it.
Now run along and revive that old <marquee> on your site!
- Tutorial introduction
- General overview of the <marquee> tag of IE
- The new attributes, events, and methods
- Scripting the <marquee>