1. Computing
Send to a Friend via Email

Scrolling Ad

Glossary

DHTML DOM CSS

This script displays an ad over your web page which moves slowly from side to side across the page until it has either crossed the page a specified number of times or the mouse pointer is moved over the ad. Once it has crossed the page the specified number of times the ad disappears.

The ad will stop moving when the mouse cursor is moved over the ad. It will then remain stationary on the web page and will not resume motion. The close link at the bottom of the ad can then be used to remove it from the page.

The script works exactly the same way in all recent versions of Internet Explorer, Netscape, and Opera. The script even works in Netscape 4 except that in that browser the ad only stops moving if the mouse cursor moves over the close link.

To insert the scrolling ad onto your web page you first need to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called scroll.js.

You also need to create a file called scroll.css containing the following:

#mainAd{border:solid 1px #666666; width:220px;
background-color:#ffccff;padding:2px; position:absolute;
left:0px; top:300px; z-index:999;}

You don't need to touch the Javascript code but you may want to alter some of the style sheet parameters. You can safely change any or all of the style sheet parameters attached to #mainAd except for position:absolute;left:0px; which is required to allow the ad to move independently of the rest of the page content.

The next step is to add these to your page by placing the following code into the head section:

<script src="scroll.js" type="text/javascript">
</script>
<link rel="stylesheet" href="scroll.css" type="text/css" />

You also need to add a line of Javascript into the body section of your page. Anywhere in the body will do but just before the </body> tag is probably the best place to stop it interfering with the rest of your page. This one line script you will write yourself since the main part of the content is what you want to appear in the ad and how many times it is to cross the screen before it disappears. These two values are passed as parameters to the displayAd function in the Javascript you added to the head of your page and it takes care of everything else. As an example of how to code this one line Javascript, here is the code used to display the sample scrolling ad on this page:

<script type="text/javascript">
displayAd('<div align="left"><b>The text for your ad goes
continued from previous line here.<br />Do you think your visitors will
continued from previous line notice this?</b></div>',10);
</script>
Related Video
Jim Spanfeller, president of Forbes.com, on ad models

©2014 About.com. All rights reserved.