Thingys & Doodads - Rotating Banners

This edition of Thingys & Doodads will outline the procedures used to install rotating banner images on your website.

I can't tell you if other people notice things like new banners when they log on to a site, but I do. I see that Rocket Ted keeps fresh banners on a regular basis. Jennifer is always tweaking around with her banners and site design. Linda has displayed three or four really nice banners until she settled on her current one. This script will select a random image from a list and load that image when the page is loaded or refreshed. I use 3 images on my site. I set up Harvey's site with 8 or 10 banners (if I remember correctly). I set up Sir John of Argghhh!!! with 6 banners. Pam did all the banners for Harvey, John and me (if you want some nice new banners, she can come up with something real good for you).

There are several ways to set this up... you can just put them in your templates, you can put them in a template module and use an MTinclude statements in your templates, you can set up text files and use php includes in your templates... the last method is the best way to keep your rebuild times fast. For the purposed of this tutorial, I'll use the method for MTincludes.

Scripts and instructions are listed out in the extended entry...

What this script does - When your page is loaded or refreshed, it generates a random number based on the number of logos in the script in the head section and selects the corresponding image to display.

First is the script for that goes in the head section:

<script language="JavaScript" type="text/javascript" >
<!--
var logo = new Array() // do not change this

logo[0] = 'http://madfishwillies.mu.nu/images/madfishmetalB.jpg'
logo[1] = 'http://madfishwillies.mu.nu/images/madfishmetal2.gif'
logo[2] = 'http://madfishwillies.mu.nu/images/madfishmetal3.gif'

var j = 0
var p = logo.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = logo[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+logo[whichImage]+'" width="780" height="173" border="0">');
}
//-->
</script>

I put this code in a template module named RotateLogoHead. Then, I put this code in the head section: <$MTInclude module="RotateLogoHead"$ />

You can modify or delete the width, height, and border attributes in the above code to fit your needs.

Next, is the code that goes in the body section:

<div id="banner" align="center">
<a href="http://madfishwillies.mu.nu/index.php" accesskey="1">
<script language="JavaScript" type="text/javascript" >
<!--
showImage();
//-->
</script>
</a>
</div>

I put this code in a template module named RotateLogoBody. Then, I put this code in the body section where I want the logo banner image to appear. <$MTInclude module="RotateLogoBody"$ />

You can add as many images in the roation as your want. Just copy & paste the last line listing the images, edit the logo number. Pay attention to the punctuation!

If you have a favorite banner image that you want to display more often than the others, you can "weight" the list by inserting more lines for that image.

As always... everything you add to your template will cause load times to increase.

Note: The code accesskey="1" is a hotkey code. If you press the key combination of ALT+1, you will go to the URL address in the link.

Next Week: Random Quotes in php

Posted by Madfish Willie at June 26, 2004 09:32 PM