A Random Element for Your Web Pages

Imagine that every time you visited a web site, it appeared completely unchanged. No new content, no new images, nothing different. It would seem, well, stale. Boring.

There are lots of strategies for ensuring that a web site doesn't appear stale to its audience. The most obvious one, of course, is to continually add new content such as articles, blog entries, etc.

Printed brochures are static, but web sites should never be. One technique that I've used on several web sites over the years is to add a random element to a web page. One example is the Blog Spot web page on this site, which has a random quote that appears in the upper right corner of the page.

Another example is the home page of the MudDawg.com web site that I did for my brother (who moonlights as a professional motorcycle racer). That site features an inset picture that randomly changes every time the home page is displayed.

So, let's look at how to create a random element like the inset picture for the MudDawg.com web site using ASP.NET (specifically, VBScript).

Assume that there are 20 available pictures to be selected as the inset picture for a web site. Each picture will be stored in a sub-directory, and will have a name like "pic_#.jpg". The code will randomly select a number between 1 and 20, so we'll be able to select an image to be shown.

The code below creates a System.Random object, setting the random seed based on the current clock ticks. The GetRandomNumber function uses that System.Random object to generate a random number between the designated high and low values (inclusive).

Listing 1 - Random Selection

<script runat="server" language="vb">
   DIM intDiceRoll AS Integer
   DIM objRandom As New System.Random( _
      CType(System.DateTime.Now.Ticks Mod System.Int32.MaxValue, Integer))

   PUBLIC FUNCTION GetRandomNumber( _
      Optional ByVal Low AS Integer = 1, _
      Optional ByVal High AS Integer = 100) AS Integer 
      '--- Returns a random number,
      '--- between the optional Low and High parameters
      RETURN objRandom.Next(Low, High + 1)

   SUB Page_Init()
      intDiceRoll = GetRandomNumber(1, 20)

Within the HTML of the web page, the following code handles the display of the image based on the previously selected random number:

Listing 2 - Displaying the Image

<img src="images/homepics/pic_<%=intDiceRoll.ToString %>.jpg" width="250" height="175" align="top" border="0">

This technique allows you to easily create random elements for web pages, such as randomly chosen images, randomly selected quotes or randomly selected articles. Of course, this example is a little artificial. You could probably use the ASP.NET Ad Rotator control to randomly select images to be displayed, as illustrated in my Ad Rotator article.

Nevertheless, my initial assertion still stands. Nobody wants to create a boring web site. Printed brochures are static, but web sites should never be.


No comments yet. Be the first.

Leave a Comment

Comments are moderated and will not appear on the site until reviewed.

(not displayed)