JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Add Text, Images and Hyperlinks to Scrolling Marquee (user activated pause)

How To Add A Scrolling Marquee
We have a similar tip, on how to add a Scrolling Horizontal Text Box. This Tip gives more examples, details, and shows you how to add images and hyperlinks. This marquee is special, in that; when a user mouses over your scrollbox, the message will pause.
The following examples show different values and use of the marquee parameters. NOTE: The Marquee will not work in Discussions. It works in Text Boxes and New Pages.

Example 1

Code: <marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="125" scrollamount="3" direction="left" height="25" width="100%" vspace="0" bgcolor="#CC0000" style="font-weight: bold; font-family: Verdana; color: #FFFFFF; font-size:14px;">The text in this marquee is white on a red background, bold font and size of 14px, 25 pixels in height, width of 100% (full width of area), and the text direction is flowing from the left. When you look at this code, the tag is for italics.</marquee>

The text in this marquee is white on a red background, bold font and size of 14px, 25 pixels in height, width of 100% (full width of area), and the text direction is flowing from the left. When you look at this code, the tag is for italics.

Example 2

Code: <marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="225" scrollamount="3" direction="up" height="150" width="125" bgcolor="#800080" style="text-align: center; padding:12px; font-family: Verdana; color: #FFFF00; font-size:10px">The text in this message is yellow on a purple background, font-size of 10px, 150 pixels in height, width of 125 pixels, scroll delay of 225 (slower), text is centered, and the text direction is up. The padding:12px parameter gives a nice margin between the text and corners of your box.</marquee>

The text in this message is yellow on a purple background, font-size of 10px, 150 pixels in height, width of 125 pixels, scroll delay of 225 (slower), text is centered, and the text direction is up. The padding:12px parameter gives a nice margin between the text and corners of your box.

Example 3

Code: <marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="100" scrollamount="3" direction="right" height="40" width="600" bgcolor="#000000" style="text-align: center; padding:12px; font-family: Verdana; color: #FFFFFF; font-size:10px">This example will show you how to insert an image with a link. It has a black background, scroll delay of 100 (faster), and the direction is flowing from the right. This is our image and link. The link will take you to the Tip that explains how to add a link to an image. <a href="http://theningdirectory.ning.com/group/ningnetworktips/forum/topics/how-to-add-a-link-to-an-image"><img border="0" src="http://theningdirectory.ning.com/custom_images/directorybannertiny.png"></a></marquee>

This example will show you how to insert an image with a link. It has a black background, scroll delay of 100 (faster), and the direction is flowing from the right. This is our image and link. The link will take you to the Tip that explains how to add a link to an image.

This example comes from our Gold Member Scroll. This will give you an example of multiple images and hyperlinks. This one is a little more complicated to follow.

If you have any issues with the code above, see attached file in original Discussion at: Click Here Also, see attached file for example code of Gold Member Scroll.

0 members favorited this

Comment

You need to be a member of JenSocial: Social Web Directory and Ning Tips to add comments!

Comment by Online Shopping Mall on July 1, 2009 at 11:51am: I didn't see the attached file for the code for the gold member scroll. Where can I find that?
Thank you,
Maureen