To read the article online, visit http://www.4GuysFromRolla.com/webtech/121300-1.shtml

Representing Numbers Graphically

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:

times since December 1st, 2000

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

Happy Programming!

Attachments:

• View the live demo!
• Download a ZIP of the digit images

•  Article Information Article Title: Representing Numbers Graphically Article Author: Scott Mitchell Published Date: Wednesday, December 13, 2000 Article URL: http://www.4GuysFromRolla.com/webtech/121300-1.shtml