On a number of sites you'll see a page counter or some sort of dynamic number displayed as an image as opposed to a text string. The most classic example is the page counter, where you'll see some blurb like:

However, this is not the only application when you might like to display a number as a string of digits. Perhaps you'd like to display the time:

:

In a little side project of mine I needed such functionality, to display various numbers as an image. I decided to write up a short little function that would encompass this functionality. Before you can use this function, though, you need to go find ten images that represent the digits between 0 and 9. You can grab a zip file containing the digits you see above, or you can snake them from image repositories like http://www.schoenster.com/images/digits/ or http://www.chrome-concepts.com/purp/freecds.htm or http://www.uncg.edu/images/digits/digits.html. (All of these sites were found with a search on image and digits at Google.com.) Next, save these ten digit images in some directory, like /digits.

Now that you have your digit images saved we're ready to examine the ConstructDigits function. This function accepts a single parameter, iValue, which represents a numerical value. The function returns an HTML string with the appropriate HTML IMG tags to generate an image representing the value of iValue.

The first thing ConstructDigits does is ensure that iValue is a number, does not contain any decimal points, and is greater than or equal to zero. While these check could be done with a single regular expression, I've opted to use three If ... Then statements:

Function ConstructDigits(iValue) 'This function accepts a single parameter, iValue, and 'returns HTML containing a series of images representing 'a graphical image of the value in iValue 'Start by ensuring iValue is a number If Not IsNumeric(iValue) then ConstructDigits = iValue & " IS NOT A NUMBER!" Exit Function End If 'Can't show decimals! If InStr(1, iValue, ".") then ConstructDigits = "CANNOT CONTAIN DECIMALS!" Exit Function End If 'Can't show negative numbers! If iValue < 0 then ConstructDigits = "CANNOT DISPLAY NEGATIVE NUMBERS!" Exit Function End If ... TO BE EXAMINED ... End Function

[View a live demo!]

The first check uses the IsNumeric function to determine if iValue is indeed numeric. If iValue is not numeric, the function returns a warning. Since numbers with decimals and negative numbers are still considered numeric numbers, we need two more checks to account for these two other cases. The next check uses InStr to check if iValue contains a decimal point; if it does, a warning is returned. Finally, the last check determines if the value of iValue is less than zero; again, if it is, a warning is returned.

The only remaining part of the ConstructDigits function is the actual work of displaying a number as an image. This is accomplished with a For ... Next loop that iterates through each character of iValue, creating the correct image tag.

Function ConstructDigits(iValue) ' ... CODE IN ABOVE LISTING REMOVED FOR BREVITY ... Dim iLoop, strResults For iLoop = (Len(iValue) - 1) to 0 STEP -1 strResults = strResults & "<img src=""/digits/" & _ Mid(CStr(iValue),Len(iValue) - iLoop,1) & ".gif"" border=0>" Next ConstructDigits = strResults End Function

[View a live demo!]

The above code example assumes that the digit images are stored in the format N.gif (that is, that the image for digit 1 is stored as 1.gif and that these images are stored in the /digits directory. You may need to make some slight changes to the code if either of these conditions aren't true for your digit images.

Simplifying ConstructDigits

The ConstructDigits function presented in the article can pretty much be reduced to a single line of code: (iValue + "").replace(/([0-9])/g, '<img src="$1.gif">' ) Since I do all of my scripting in JavaScript, the code above is in JavaScript. The replace function is also available in VBScript, on the RegExp object, and should work the same way. (For more information on Regular Expressions with VBScript, be sure to read: An Introduction to Regular Expressions with VBScript!) -- Dennis M.

Well, there you have it, a means to display a number as an image. Now that we have this part licked, you may wish to know about some articles that could make use of the ConstructDigits function. Here are some articles that could be easily adapted to use the ConstructDigits function to snaz up their display!

• How Many People are on your Site Right Now?
  
• Creating a Persistent Web Page Counter
  
• Building a Simple Hit Counter with ASP
  
• Timing the Execution Times of your ASP Scripts
  

Happy Programming!

Attachments: