Creating a scrolling marquee

In FrontPage, you can create a scrolling marquee by clicking Insert and Web Component. (You can find it listed under Dynamic Effects.)  However, sometimes it's greyed out. This is because FrontPage inserts a MARQUEE element, which is only viewable from Internet Explorer. (Opera also displays the MARQUEE element properly.) To be able to add a marquee to your page, you need to specify that you are creating a page to be viewed only with Internet Explorer. You can do this from the Authoring tab of the Page Options dialog box (Tools menu). Under Browsers, select Microsoft Internet Explorer Only.

Now that you know how to add a scrolling marquee, you may want to customize it. By default, FrontPage doesn't set any attributes when it inserts a marquee, so what you get is plain text that scrolls from right to left across the page. FrontPage provides a dialog box that allows you to change the direction (left or right), speed, behavior, size, and background color and specify whether the marquee repeats and how many times. This may provide all the functionality you want for your marquee, but what if you want to bold some text or add an image? Or what if you want the marquee to scroll from top to bottom or vice versa? One customer who contacted me wanted to make each letter a different color. Another customer wanted to add a hyperlink.

Customizing a Marquee

To add customizations that FrontPage doesn't allow in the dialog box, you need to modify the HTML code in Code view.  You can add almost any element you want to a marquee, and it will work perfectly fine. However, keep in mind that when you do this, the display in FrontPage will be ... uh ... funky.  The MARQUEE element is one of the few HTML elements that FrontPage does not display exactly WYSIWYG.  Instead, you see all the code that you add within the opening and closing <marquee> tags. FrontPage sees these as text, but the browser does not.

For example, perhaps you want to add a hyperlink to some text.  You can switch to Code view and insert the hyperlink by adding an A element to the code (note that using the Hyperlink dialog box will add a hyperlink around the entire marquee and not just around selected text).  To illustrate, I created a simple marquee and inserted a hyperlink around a portion of the text.  In Design view, my marquee appears as shown in the following screen shot.

But in the browser, it scrolls as expected with hyperlinked text.

So now that you understand that what you see in FrontPage won't be exactly correct, you can add any number of other HTML elements to a MARQUEE element.  You can add P elements to create paragraphs; IMG elements to insert pictures; UL, OL, and LI elements to create numbered and bulleted lists; SPAN elements to change the color and font of one or more characters; B elements, I elements, U elements, DIV elements, etc.  (You can even add MARQUEE elements, which gives you overlapping scrolling marquees. This may sound kinda cool but it would be very strange if not done exactly right — for example, a top to bottom scrolling marquee that contains a right to left scrolling marquee might be a bit interesting....)

Vertical Scrolling Marquee

In the Marquee Properties dialog box, FrontPage provides the ability to change the direction of the scroll from left to right or right to left (the default is right to left). However, the MARQUEE element allows for scrolling from top to bottom and bottom to top as well. After you insert the marquee into your page, switch to Code view and change the direction attribute of the MARQUEE element to "up" to scroll from bottom to top or "down" to scroll from top to bottom.

Scripting the MARQUEE element

There are a variety of things that you can do to change the appearance of scrolling marquees, but one I saw recently was someone who wanted the marquee to slow down upon mouseover.  As long as browser compatibility isn't an issue, since this only works in IE, you can script the MARQUEE element to slow down on mouseover, and then to speed up on mouseout.

The following two functions, slow and fast, change the scroll speed (by changing the scrollAmount property) of a specified MARQUEE element.

 <script language="javascript">
 function slow(ele)
 {
 ele.scrollAmount = 1;
 }
 
 function fast(ele)
 {
 ele.scrollAmount = 15;
 }
 </script>

All you need to do to see this in action is to add the following HTML code to a page and display th page in IE.

 <marquee direction="up" width="238" height="100%"
 scrollamount="15" onmouseout="javascript:fast(this);"
 onmouseover="javascript:slow(this);">This is a test.</marquee>