Using the script we previously made (more specifically, we need the variable $count), we can now begin to create a graphical counter.

Note: This version does not require the GD library

On this page we'll make an HTML graphical counter. This means that image tags (<img>) will be dynamically added to the HTML, instead of an image being created dynamically. While this way of creating a counter is faster and lighter
on the system, all the pages with the counter must be PHP enabled.

This script can be used with any counter script. In this script, we are simply creating the image tags, not adding or updating the count values. If you use a different counter, just make sure to set the variable $count to the count value. In this tutorial, we'll use the script from the previous lesson. Let's get started...

First of all, you need to upload some digits to your website. A huge selection can be found at Digit Mania. Make sure that all these images have the same height and width.

Now it's time to set some variables:
->$path is the path to the images directory (ex /home/www/counter/images/)
->$url should be the HTTP path to that same directory (ex
http://www.domain.com/counter/images/).
->$ending is the file name of the images (normally '.gif')
->$default_style is the style if none is chosen (styles are explained below)

I thought it would be neat to be able to have multiple counter styles. For example, maybe I want to have a set of black digits as well as white digits. To do this, simply upload 0black.gif, 1black.gif, 2black.gif... 0white.gif,
1white.gif, 2white.gif, etc to the '/images/' directory. Then, if you want the digits to be black unless specified otherwise, make $default_style equal to 'black'. It's that easy!

Now that we've set the initial variables, it's time to start the real coding. We need to check and see if the variable $style has been set. If it hasn't, then $style should be set equal to the $default_style. A simple trinary operator will suffice.

When that is completed, we can start to build the HTML. We need to get the height and width of the images that we'll be using. Because the height and width of all the images are the same, we only need to get the information once.

Note: The height and width of different styles can be different, just not any images of the same style.

PHP has a very handy function called GetImageSize() which suits our purposes perfectly. This function will actually print out the height and width HTML code!

Now it's time to print out the HTML. All we need to do is to loop through each number in $count, printing out the code as we go. That's all that's to it!