reptile7's JavaScript blog is Andrew Peak's personal technical writing project: it focuses on JavaScript and the analysis of JavaScript scripts, although HTML, CSS, and anything else related to coding for the Web are also fair game.

Script Tip #34's "Take a look at the script" link leads to a blank page. Well, OK, it's not "blank" - it contains the HTML Goodies site template, and there are some ads on the right-hand side - but the script isn't there. Bizarrely, the second half of the page's source, where the <!-- New content here --> would be, is simply missing. Moreover, the Script Tip #34 Script makes use of five images, which are also AWOL.

Joe's Script Tip #34 Script demo does not work and would not work even if the banner#.gif images were on hand because, once again, the script's [ and ] square bracket characters have fatally been escaped to &#91; and &#93;, respectively, as they were in the Script Tips #31-33 Script. But check out this "legacy" Script Tip #34 page, whose source is OK and whose demo does indeed function.

I offer a modified demo in the div below:

Overview of the Script Tip #34 Script
As shown above, the Script Tip #34 Script displays a random, rectangular banner - a .gif image that hyperlinks to the Web site indicated by the text on the image. Joe doesn't say how he created the banner#.gif images, but on the basis of HTML Goodies' Ad Banners Primers, my guess is that he used the PaintShop Pro graphics editor. We'll see later in the post that we can make almost identical banners via a combination of HTML and CSS.
Joe concedes that the Script Tip #34 Script is "all review," but a bit of deconstruction won't kill us.
The script begins by creating an array of 'latent' images: five img elements housing the banner#.gif images are stringified and assigned as elements to the array variable banners. Why use image strings? Because we'll be displaying the banner#.gif images by plugging the banners elements into a document.write( ) command at the end of the script, and besides, we can't directly variabilize the img elements themselves:
banners[0] = <img border='0' src='banner0.gif'>;
promptly throws a syntax error. However, the banner#.gif images can be directly arrayed as document objects, as we'll see in the "Other code possibilities" section below.
Secondly, the script creates a parallel GoTo array of five URL strings that respectively specify 'destination anchors' for the banners[i] images.
We next generate a random integer, Number, that ranges from 0 to 4, inclusive, via the random( ) and round( ) methods of the core JavaScript Math object - we recently discussed both of these methods in Blog Entry #58:
var Number = Math.round(4 * Math.random( ));
(Alternatively, Number can also be generated, if not quite as randomly, by the methodology of HTML Goodies' JavaScript Primers #20:
var Number = new Date( ).getSeconds( ) % 5;.)
Number then serves as a common index number conjugating the banners and GoTo arrays. banners[Number] will be our random banner, and GoTo[Number] is where we'll go when we click on that banner. All that remains is to get it all to the page with a document.write( ) command:
var TheLink = GoTo[Number]; var TheImage = banners[Number];
document.write("<center><a href=" + TheLink + ">" + TheImage + "</a></center>");
Linkwise, the banners[Number] (TheImage) image is the content of an anchor element whose href attribute value is GoTo[Number] (TheLink).
Other code possibilities
Let's start by separating out the presentational aspects of the script:
<style type="text/css">
a {
display: block;
text-align: center; }
img { border-width: 0; }
/*The CSS Level 1 Specification notes, After a '0' [length value] number, the unit identifier is optional.*/
</style>
Next, let's organize the banner#.gif images as an object array; a for loop is useful in this regard (and especially so if you wanted to use the script with a larger number of banners):
var banners = new Array( );
for (i=0; i<=4; i++) {
banners[i] = new Image(300,50);
banners[i].src = "banner" + i + ".gif"; }
// This caches the banners for faster loading.
Now, let's get the rest of the HTML out of the script; put the following code after the style block and before the script element start-tag:
<body>
<a id="randomLink"><img id="randomImage"></a>
Finally, remove the script's last three commands (the TheLink declaration, the TheImage declaration, and the document.write( ) command) and instead display the random, linking banner with:
document.getElementById("randomLink").href = GoTo[Number];
document.getElementById("randomImage").src = banners[Number].src;
There. We're all up-to-date.
Let's make our own banners
It's not necessary to horse around with a program like PaintShop Pro or Photoshop to create the simple banners of the Script Tip #34 Script; HTML and CSS alone are up to the task. Behold the banner below:
Blogger.com
Here's the HTML I used:
<a href="http://www.blogger.com/"><span>Blogger.com</span></a>
And here's my CSS:
a {
display: block;
width: 300px;
height: 50px;
margin-left: auto; margin-right: auto;
background-color: red;
text-align: center;
text-decoration: none; }
span {
position: relative; top: 13px;
font-size: 24px;
font-family: sans-serif;
color: white; }
The banner is horizontally centered on the page by the anchor element's margin-left: auto; margin-right: auto; style declarations. In turn, the "Blogger.com" text is (approximately) vertically centered in the banner by the span element's position: relative; top: 13px; style declarations.

We'll move on to Script Tips #35-37 in the next post and dissect a script that displays a text message as a cyclical scroll.