How to create a custom image for the hit counter by using SharePoint Designer 2007 or FrontPage 2003

This article describes how to create a custom image for the hit counter in Microsoft Office SharePoint Designer 2007 or in Microsoft Office FrontPage 2003. The hit counter divides an image into 10 equal horizontal segments to display the numbers. The 10-percent segment on the leftmost side is zero (0), and FrontPage enumerates each 10-percent segment to the right 1 through 9. The hit counter supports Graphics Interchange Format (GIF) images only.

Create a custom image for the hit counter

To create a custom image for the hit counter, follow these steps:

1. Create an image:
   1. Open an image editing program that can save files as .gif images (for example, Microsoft Photo Editor), and then create an image that is 200 pixels wide and 40 pixels high.
   2. Evenly put text for the numbers 0 through 9 from left to right. If your image editing program can put a grid on the image, you may want to use this feature to align the text more accurately. In this example, the graphic for each number is 20 pixels wide. The numbers should form a line:
      0 1 2 3 4 5 6 7 8 9
   3. After you are satisfied with the look and the alignment of your image, save the image in .gif format as Counter.gif.
2. Import the image into your Web site:
   1. Open your Web site.
   2. On the View menu, click Folder list if the Folder list pane is not visible. In the Folder List, click the Images folder to open it.
   3. Import the image:
      
      SharePoint Designer 2007
      1. On the File menu, point to Import, and then click File.
      2. In the Import dialog box, click Add File.
      3. In the Add File to Import List dialog box, locate and click the Counter.gif file, and then click Open.
      4. In the Import File dialog box, click OK.
      FrontPage 2003
      1. On the File menu, click Import.
      2. In the Import dialog box, click Add File.
      3. In the Add File to Import List dialog box, locate and click the Counter.gif file, and then click Open.
      4. In the Import File to FrontPage Web dialog box, click OK.
3. Add the counter and custom image to your page:
   1. In Design view, open the page where you want to use the counter.
   2. Click your page to put the insertion point in the location where you want the hit counter to appear.
   3. On the Insert menu, click Web Component.
   4. In the Insert Web Component dialog box, click Hit Counter, and then click Finish.
   5. In the Hit Counter Properties dialog box, click Custom Picture.
   6. In the Custom Image text box, type images/counter.gif, and then click OK.
   7. On the File menu, click Save
   8. Click Preview in Browser.

Note You may have to edit the image in your image editing program several times to correct the placement and look of the numbers. The size of the image is not important to the hit counter, but for simplicity, you may want to create images that have widths that are evenly divisible by 10 (for example, 100 pixels, 200 pixels, 300 pixels).