My friend James has a site where he makes available political banners of his own design promoting John Kerry.  Until midnight on November 2, Unbecoming Levity will display a random banner under the ULev logo above.  For now all of them will be James' unless I decide to make a few of my own.  If you're curious to know how I made the random banners happen, read on...

My original plan had been to do something like this:

<IMG SRC="javascript:getBanner();">

Where 'getBanner' would be a javascript function which returns the URL of a random banner.  So when the browser went to get the source (SRC) of the image (IMG), it would run the function and get the URL. Simple and it makes sense right?  Right.  That's why it doesn't work.

What you actually have to do is this:

<script>document.write("<img src='" + getBanner() + "'>");</script>

Sometimes javascript pisses me off.  Anyway, once I realized that, writing the script for getBanner was pretty easy.  Here's what it looks like:

function getBanner()
{
    numBanners = 8;
    t = Math.floor(numBanners*Math.random()+1);
    n = new String(t) + ".jpg";
    while (n.length<7) n="0"+n;
 
    n = "pbanner" + n;
    return(n);
}

First I identify the number of banners in numBanners, in this case 8.  So I need a random number between 1 and 8.

The next, rather gruesome looking line produces that random number.  Basically Math.random() returns a random floating point value somewhere between 0 and 1, like .03674262531119.  The value may come very close to 1 but never equals 1.  So I take this value and multiply by 8.  This will give me a number between 0 and 7.999[9...].  Then, I call Math.floor() which drops off everything to the right of the decimal point, giving me a number between 0 and 7.  Then all I have to do is add 1 to this value, which gives me what I wanted--a value between 1 and 8.

Then the number is changed into a text string, and ".jpg" is appended to it.  All the banners are JPEGs.  So if the random number had been 6, the string would now be "6.jpg".

The while loop on the  next line [while (n.length<7) n="0"+n;] tests to see how many characters are in the string.  If there are less than 7, it prepends a "0" to the string.  I wanted the numbers in the filenames to be zero-padded.  If the string was "6.jpg", once this loop finishes executing it will be "006.jpg".  Then I just prepend this with the rest of the filename, in this case "pbanner" and I've got a random banner filename (pbanner001.jpg, pbanner002.jpg, ... etc.)

If I ensure all the banners have a consistent numbered naming scheme, I should be able to serve up more banners as I please simply by updating the value of numBanners above.

Finally, I tweaked the code which inserts the image into the page, this is what the final result looked like:

<a href="http://www.trimshrub.com/">
<script>document.write("<img src='http://unbecominglevity.blogharbor.com/banners/" + getBanner() + "' vspace=8>");
</script></a>

This makes each banner be a link to trimshrub.com.  The extra URL stuff after <img src gives the location of the banner file.  I suppose I could have buried that inside getBanner, but having it outside makes it easier to reuse getBanner for other banners.  Finally the vspace=8 puts a little space between the banner and anything above or below it.