reptile7's JavaScript blog
Tuesday, January 23, 2007
 
Bannerama!
Blog Entry #64

Today we'll discuss HTML Goodies' JavaScript Script Tip #34 and its random banner script; actually, "discuss" doesn't quite do the situation justice - "rescue from oblivion" is more like it.

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.

However, a detailed knowledge of the HTML Goodies site pays dividends here. In Blog Entry #57, we fished Iceman's browser sniffer out of HTML Goodies' /legacy/beyond/javascript/stips/ subdirectory. Gratifyingly, the scripttip34script.html page of this subdirectory contains the Script Tip #34 Script, which is reproduced below:

<script language="javascript">

banners = new Array( );
banners[0] = "<img border='0' src='banner0.gif'>";
banners[1] = "<img border='0' src='banner1.gif'>";
banners[2] = "<img border='0' src='banner2.gif'>";
banners[3] = "<img border='0' src='banner3.gif'>";
banners[4] = "<img border='0' src='banner4.gif'>";

GoTo = new Array( );
GoTo[0] = "http://www.htmlgoodies.com";
GoTo[1] = "http://www.developer.com";
GoTo[2] = "http://www.mtv.com";
GoTo[3] = "http://www.vh1.com";
GoTo[4] = "http://www.whitehouse.gov";

var Number = Math.round(4 * Math.random( ));

var TheLink = GoTo[Number];
var TheImage = banners[Number];

document.write("<center><a href=" + TheLink + ">" + TheImage + "</a></center>");

</script>

(We will in future entries encounter several other Script Tip scripts whose page URLs are botched in the same way.)

And what about those images, huh? They, too, can be found in the /legacy/beyond/javascript/stips/ subdirectory.

The banner0.gif image, HTML Goodies banner, is here.

The banner1.gif image, Developer.com banner, is here.

The banner2.gif image, MTV.com banner, is here.

The banner3.gif image, VH1.com banner, is here.

The banner4.gif image, White House banner, is here.

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.

reptile7

Labels:


Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)