Rotating Banners II

Crossposted at Rocket Jones.

Madfish Willie posted an excellent banner rotation script that I used as the starting point for some tweaking to allow it to handle banners of different sizes. I'll just post the changes here and go through it step by step.

(in the extended entry)

Here's the original code to randomly display a different banner each time you refresh the screen as posted by Madfish Willie. If you look it over, it's simple, elegant, and perfect to use if all your banners are the same size.

But the Rocket Jones banners aren't all the same size. Here's how we'll modify that code to handle it. First, after this line in the original code:

var logo = new Array() // do not change this

We'll add two new arrays, one to define the height of each banner, and one to define the width. Like so:

var tall = new Array()
var wide = new Array()

Next, are the definition statements where Madfish loads his images into the image array. You'll place your images here by replacing the part after the "http://" with your banner names (don't forget the path). It's important to start with the zero, and if you have more than the three listed, add more lines as needed. Original:

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'

And modified to display four imaginary RocketJones banners:

logo[0] = 'http://rocketjones.mu.nu/images/RJBanner1.jpg'
logo[1] = 'http://rocketjones.mu.nu/images/rocketbanner1.gif'
logo[2] = 'http://rocketjones.mu.nu/images/LadyRocket.gif'
logo[3] = 'http://rocketjones.mu.nu/images/SaturnVbanner.gif'

And then add these lines to load the corresponding dimensions for the banners above.

tall[0] = 100
tall[1] = 150
tall[2] = 125
tall[3] = 150

wide[0] = 500
wide[1] = 400
wide[2] = 450
wide[3] = 450

Note that those are supposed to be square brackets for all of those value assignments like "tall[3]=150".

Now what these are saying is that the banner in slot zero can be found at the path described in logo[0], and it has the height (in pixels) described in tall[0] and the width (again, in pixels) described in wide[0]. The banner in slot 1 corresponds to tall[1] and wide[1] and so on. If you mix up the dimensions given for the banners, they'll still display, but the browsers will distort your banners to match the dimensions you entered (which is useful if you want to force the images into a set size).

The next bits of code do some initialization and setup that we don't need to mess with, so we'll move straight on to this line:

document.write('{img src="'+logo[whichImage]+'" width="780" height="173" border="0"}');

In the line above I changed the opening and closing angle brackets to squiggle brackets so that they'd display. You'll want to change them back to the 'less than' and 'greater than' symbols.

Madfish's original banners were all 780 pixels wide by 173 pixels tall, and those are the two numbers that we're changing with those two new arrays called tall and wide. See how simple this is? Almost logical, even.

document.write('{img src="'+logo[whichImage]+'"
width="'+wide[whichImage]+'" height="'+tall[whichImage]+'" border="0"}');

In the line above I changed the opening and closing angle brackets to squiggle brackets so that they'd display. You'll want to change them back to the 'less than' and 'greater than' symbols.

Leave the rest of the code exactly as he originally provided (beware that mix of single and double quotes), and put it into your template per his instructions.

To call it from your main template, add this bit at the top where your banner is called:

[div id="banner" align="center"]
[!-- Rotating Banner Script --]
[script language="JavaScript" type="text/javascript" ]
[!--
showImage();
//--]
[/script]
[!-- End Roating Banner Script --]
[/div]

Once again, all the angle brackets were changed to square, you'll need to change them back.
Technically, what you've done is created a function that randomly selects and displays an image from the list you've provided each time the browser page is refreshed. In terms even I can understand, it's freakin' magic.

Posted by Ted at June 21, 2005 11:41 AM