WillMaster Possibillites Logo EzineSeek Award
Seamless Banner Tickers
by
William Bontrager

Permission is granted to reprint the article below in its entirety provided no changes are made to the article text and the author's name, signature lines, and copyright line are printed with the article. However, you may change the article's title.

Banners. Some people make money with them. Many people find them annoying.

Animation tends to be the most annoying aspect of banners -- annoying not only to the surfer with the tendency to distract, but also to the webmaster with the tendency toward large file sizes.

And banner click-through rates are declining.

Today, we fix all that :)

Today we use standard, proven technology to eliminate banner animation, reduce banner size below even the non-animated banner, and with a high probability of increasing click-through rates.

We incorporate JavaScript scrolling text within the banner itself.

The scrolling text is not the amateurish stuff you see around the net; scrolls with a large gap between end of message and beginning of repeat. To the contrary, this method is seamless and appears highly professional. The message area is never empty.

With today's method, you can get rid of distracting animation. Yet, you attract attention with the moving ticker text.

It is new. It is unique.

It will attract attention.

This is how you do it:

You need a banner 35 x 468 pixels in size. Our example uses the banner on the demonstration page at http://willmaster.com/possibilities/demo/bannerticker.shtml (The reason for the 35 pixel banner height is that the ticker text area takes up to 25 pixels; different browsers require different ticker text space, but all we've tested fall within the 25 pixels.)

Step 1 -- Place the JavaScript Ticker Functions:

Place the following somewhere between the <HEAD> and </HEAD> tags of your page: 


<script language="JavaScript">
<!-- Copyright 1999 by William and Mari Bontrager. All rights reserved.
var scrollspeed = 150;  // higher number is slower scroll
var textboxlength = 55; // the size="__" number in your <input... text box
// ticker text can be multiple lines with format:  'text' +
var tickertext = '' +
'Visitor interaction (Written for webmasters.) ' +
'CGI page generation (Free subscription!) ' +
'Perpetual webpage updates (Uses everyday language.) ' +
'Forms (Written by a programer.) JavaScript ' +
'(Written for the inexperienced.) Perl ' +
'(Every week, something new for your website to do.) ' +
'';
var blurb = ' ';
var pos = 0;
var offset = textboxlength / 2;
var dtlen = tickertext.length + offset;
function preparetext(){
var i;
for (i = 1; i < offset; i++) { blurb += ' '}
blurb += tickertext + tickertext + tickertext;
scrollbannertext();
}
function scrollbannertext(){
document.bannerscroll.scroll.value = blurb.substring(pos,(dtlen + tickertext.length));
pos++;
if(pos > dtlen) pos = offset;
setTimeout('scrollbannertext()',scrollspeed)
} // -->
</script>

We'll go over the modifications you can do to the ticker functions in step 4.

Step 2 -- Place the following onLoad command into your page's <body... tag: 


onLoad="preparetext()"

Your <body... tag might then look something like this: 


<body bgcolor="#FFFFFF" onLoad="preparetext()">

The onLoad command tells the browser to do something immediately when the page has finished loading. In this case, it will start the ticker advertising message.

Step 3 -- Place the banner:

Where you want the banner, begin by placing these two lines: 


<form name=bannerscroll>
</form>

Notice that the form has a name. It is required for the ticker functions to work correctly.

Between those two form lines, place an empty one-column, two-row table. The table is 60 x 468, with all border and spacing elements to zero. The background color of the table is the same as the background color of the banner. 


<form name=bannerscroll>
<table height="60" width="468" bgcolor=#000000" border="0" cellpadding="0" cellspacing="0"><tr>
<td height="35"></td>
</tr><tr>
<td height="25" align=center valign=top></td>
</tr></table>
</form>

Notice that each row, from <td... to </td>, is all on one line. They must remain that way. No extra spaces may be introduced into the rows; some browsers introduce spaces where they find line breaks.

(A note on banner background color: If the banner's background color is one of the 216 Netscape browser colors then it will be much easier to do a seamless color match between table background and banner that is consistent from browser to browser. It is something to take into consideration when designing your banners.)

Okay, it's time to place the banner.

Make the banner image a link and place it into the top row of the table.

Now, place a form input text area into the second row. The text area's name must be "scroll" for the ticker functions to work correctly.

The entire banner code, then, looks like this: 


<form name=bannerscroll>
<table height="60" width="468" bgcolor=#000000" border="0" cellpadding="0" cellspacing="0"><tr>
<td height="35"><a href="http://willmaster.com/possibilities"><img src="bannerticker.gif" border="0" width="468" height="35" alt="banner"></a></td>
</tr><tr>
<td height="25" align=center valign=top><input type="text" name="scroll" size="55"></td>
</tr></table>
</form>

OK, the last step.

Step 4 -- Modifying the text input area and ticker functions:

In the form's text input area tag, you'll see the element: 


size="55"

The number in quotes tells the browser to make the size of the text area large enough to fit that many monospaced characters. You may adjust the text area size to your requirements. Be advised that 55 is about the maximum to still stay within banner width, because different browsers use different widths for monospace characters.

Whatever number you choose for your text area size, that same number must be in the JavaScript ticker functions. The fourth line down from the top of the functions as printed in step 1, you'll see: 


var textboxlength = 55; // ...

For the functions to work correctly, that number must be the same as the number you used for your text area size.

One line above that, at the third line, you'll see: 


var scrollspeed = 150;  // ...

That number regulates the speed of the ticker message scroll. It tells the browser to wait that many milliseconds before scrolling the next character. The higher the number, the slower the scroll.

The last modification area begins on line 6 with [NOTE: those are two apostrophes (single quotes), not just one quote/double quote] 


var tickertext = '' +

and ends on line 13 with two apostrophes (single quotes), like 


'';

In between those lines is your advertising message, the message that becomes the ticker scrolling through your banner.

Use as many or as few lines as you want. JavaScript can handle very long lines, if you prefer to do it that way. Just make sure each line begins with an apostrophe (ASCII single quote) and each lines ends with an apostrophe and a plus sign. In between those two apostrophes is your message. The functions will concatenate your message lines into one long line for your ticker.

Hope you can use this.

May you have many and profitable banner returns.

Copyright 1999 by William Bontrager

William Bontrager, Programmer and Publisher
"Screaming Hot CGI" programs
"WillMaster Possibilities" e-Newsletter
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com