Random Content Rotation Made Easy

After reading Random Image Rotation by Dan Benjamin, I thought I'd share a method I used recently to rotate 'Success Stories' on my site. The concepts and script I will present in this article can be used in the same way as Dan's to keep a page from becoming dull to repeat visitors.

The concept is similar but not the same; the script we'll talk about here can be used to create random rotation of any (X)HTML code you choose. It's server-based and not dependent on JavaScript.

Overview

You create a number of <div>s. You import a style sheet generated by a Perl script. The style sheet sets all but one random <div> to display:none. Your design looks fresh, search engines pick up all the content (so, any links in the random content are seen every time), and screen reader users get it all too*, keeping your content accessible. The script is simple, but useful.

*As pointed out by Joe Clark, some screen readers respect display:none, so this does not apply to those delinquents. You can use something other than display:none if you wish.

Installing the Script

The script is written in Perl and should be usable on nearly all Web hosts -- you can download it here. Refer to your Web host's support desk or help files if you don't know how to get this script working. The only line you may need to change is the first line of the script, which points to the Perl executable on your server.

The Example

As an example, we'll use 3 'Success Stories'; each contains a page of content:

success1.html
success2.html
success3.html

We have room to point to only one of these Success Stories at a time when we display our homepage page to a visual browser, but there's no reason why screen readers and search engines shouldn't see all three every time.

Let's create three sections of code that can be used to lead users from the homepage to the full Success Story content pages:

<div id="success1" class="success-story">
 <p><a href="/success1.html"><img src="/images/success1.jpg" alt="Foo Ltd." border="0" />Foo Ltd. has been invaluable in bringing our product to market successfully.....</a></p>
</div>

<div id="success2" class="success-story">
 <p><a href="/success2.html"><img src="/images/success2.jpg" alt="Foo Ltd." border="0" />Foo Ltd. delivered a highly professional service.....</a></p>
</div>

<div id="success3" class="success-story">
 <p><a href="/success3.html"><img src="/images/success3.jpg" alt="Foo Ltd." border="0" />Foo Ltd. provided the project management skills we were looking for.....</a></p>
</div>

The code has a <div> for each section of content that we want to include in the rotation. The content of the <div>s is not important to the script, however. The important part is the id of each <div>, which has two sections: a prefix and a number. The class of the <div> can be whatever you need for CSS display purposes. You can, of course, use the id, but if you do this, you'll have each id appearing in your selector. Using one class makes this easier.

The Prefix

The first part of the id is the prefix. The prefix comprises everything that comes before the number. In this example, the prefix is:

success

We will pass this prefix to the script.

The Number

The second part of the id is the number; ids must always start at 1 and ascend in increments of 1 (1,2,3 etc.). You can have as many ids as you like.

We will pass the highest number to the script.