Scrolling Ad

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 download the Javascript and style sheet files that need to be added to the head section of your web page.

The code to add the script looks like this:

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

You don't need to touch the Javascript 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:0; which is required to allow the ad to move independently of the rest of the page content.

You also need to add another 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 language="JavaScript" type="text/javascript">
displayAd('<div class="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);


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow