June 26, 2004

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">');

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" >

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

This is cool. I'm just starting to get into PHP for work.

Posted by Ted at June 27, 2004 01:48 AM

To make the scripts work with php, put the scripts in a text file - for this purpsoe we'll use .inc for an extension.

Then, use php includes in place of the MTIncludes like this: <?php include('/path/to/filename.inc'); ?>.

Using php will make all your rebuilds much faster than using the MTIncludes. I illustrated the MTIncludes so that everyone could use them and not just the php enabled sites.

Posted by Madfish Willie at June 27, 2004 01:57 AM

Just to be picky ... it might ben worth your icluding a noscript tag with a default banner for those of us browsing on non or low JavaScript enabled clients

Posted by Rob at June 28, 2004 12:46 PM

Per Rob's request...

Insert the following code in the body section code after the </a> and before the </div>:

<a href="http://YOURSITENAME.mu.nu/" accesskey="1">
<img src="http://YOURSITENAME.mu.nu/path/to/FileName.jpg" border="0">

Change YOURSITENAME.mu.nu to your site's URL;
change /path/to/ to your particular path;
change ImageName.jpg to your image's filename.ext;
modify/delete the width, height, border attributes as required;
add alt and title attributes as preferred.

[Thanks, Mr Rob!!]

Posted by Madfish Willie at June 28, 2004 03:04 PM

How do you assign a separate URL to each of the rotating banner images? Thanks!

Posted by Lisa at July 26, 2004 09:31 PM
Live Comment Preview
Post a comment

Remember personal info?