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>

Comments

  • Anonymous
    July 09, 2005
    The comment has been removed
  • Anonymous
    October 14, 2005
    kinds
  • Anonymous
    October 14, 2005
    kinds
  • Anonymous
    February 05, 2006
    The comment has been removed
  • Anonymous
    February 05, 2006
    The comment has been removed
  • Anonymous
    February 08, 2006
    Just what I needed. Thanks.
  • Anonymous
    February 16, 2006
    The comment has been removed
  • Anonymous
    May 16, 2006
    Great script, we used this script for one of our clients.
  • Anonymous
    June 12, 2006
    jhow to insert a marquee
  • Anonymous
    June 22, 2006
    Thank you, it help me alot with my images now they go forwoard and not up and down TYVM!
  • Anonymous
    August 24, 2006
    Thank u , I have more suggestion that you can involve the above marquee with after it reach the top then it scroll down Ok
  • Anonymous
    August 25, 2006
    The comment has been removed
  • Anonymous
    August 27, 2006
    i think u should add more examples
  • Anonymous
    September 16, 2006
    L.s.,
    This info was very helpfully for me.
    Chris.
  • Anonymous
    September 28, 2006
    Ur technique isnt bad, but would want u to also use the blink effect as well cos am having a bit of trouble with that.

    I have a question, when u use frames like the banner frame with three frames in it and on the vertical frame to the left hand side has some list, how do u hyperlink them to their main frames  so that they each appear on the third frame whichis the biggest in the banner format?