display empty images in a counter

Hi,

I've been working on a visitor counter for about a week now, and cannot figure out what I'm doing wrong. The counter uses gif images (0-9) to display how often a person has visited my page. I can get the cookie to track the visits correctly and my script is writing the correct number of visits using the images.

However, if the number of visits is < 6 digits long, I am getting empty image icons.

For example, if the person has visited my page 8 times, the display shows 8xxxxx. If the person visits 18 times, the display shows 18xxxx. And so on.

Here is the page: http://www.geocities.com/bevcuria/572

Would really appreciate knowing how to solve this problem. Even though the page shows an accurate count, it looks ugly!

Thanks.

Well, while I was waiting for help, I managed to solve the ugliness. I didn't get what I wanted (000001, 000010, etc.) but at least I have a nice-looking counter now!

For those who may be interested, this is what I did:
http://www.geocities.com/bevcuria/572

<SCRIPT>

var visits = getCookie("counter");

document.write('<FONT COLOR=\"#cc0000\">');

if (visits) {
visits = parseInt(visits) + 1;

if (visits) visits = '' + visits;

if (visits > 0 && visits < 10) {
document.write('You have visited this page ');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
document.write(' times.');
}
if (visits > 9 && visits < 100) {
document.write('You have visited this page ');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
document.write(' times.');
}
if (visits > 99 && visits < 1000) {
document.write('You have visited this page ');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(2) + '.GIF">');
document.write(' times.');
}
if (visits > 999 && visits < 10000) {
document.write('You have visited this page ');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(2) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(3) + '.GIF">');
document.write(' times.');
}
if (visits > 9999 && visits < 100000) {
document.write('You have visited this page ');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(2) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(3) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(4) + '.GIF">');
document.write(' times.');
}
if (visits > 99999 && visits < 1000000) {
document.write('You have visited this page ');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(2) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(3) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(4) + '.GIF">');
document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(5) + '.GIF">');
document.write(' times.');
}

if (visits < 2) {
document.write('<BR><BR>');
document.write('<H2><FONT color="blue">This is your first visit.</FONT></H2>');
}
}



document.write("</FONT><BR><BR>");
document.write("Reload the page to see that the counter has incremented.");

setCookie("counter", visits);

</SCRIPT>[SIZE=1]

Overall, I like your script, but with the use of functions you can vastly improve it's efficiency. Have a look at this (everything I changed is in red)<SCRIPT>

var visits = getCookie("counter");

document.write('<FONT COLOR=\"#cc0000\">');

if (visits) {
visits = parseInt(visits) + 1;

if (visits) visits = '' + visits;

document.write('You have visited this page ');

if (visits > 0 && visits < 10) {
document.write(insertZeros(5));
document.write(insertNumber(2));
}
if (visits > 9 && visits < 100) {
document.write(insertZeros(4));
document.write(insertNumber(3));
}
if (visits > 99 && visits < 1000) {
document.write(insertZeros(3));
document.write(insertNumber(4));
}
if (visits > 999 && visits < 10000) {
document.write(insertZeros(2));
document.write(insertNumber(5));
}
if (visits > 9999 && visits < 100000) {
document.write(insertZeros(1));
document.write(insertNumber(6));
}
if (visits > 99999 && visits < 1000000) {
document.write(insertNumber(7));
}

document.write(' times.');

if (visits < 2) {
document.write('<BR><BR>');
document.write('<H2><FONT color="blue">This is your first visit.</FONT></H2>');
}
}

document.write("</FONT><BR><BR>");
document.write("Reload the page to see that the counter has incremented.");

setCookie("counter", visits);

var rootPath = "http://www.geocities.com/bevcuria/";

function insertZeros(qty)
{
var htmlStr = "";
for (var i=0; i<qty; i++)
htmlStr += "<IMG SRC='" + rootPath + "0.GIF'>";
return htmlStr;
}

function insertNumber(digits)
{
digits--;
var htmlStr = "";
for (var i=0; i<digits; i++)
htmlStr += '<IMG SRC="' + rootPath + visits.charAt(i) + '.GIF">';
return htmlStr;
}

</SCRIPT>

Or, better yet...try this<SCRIPT>

var visits = getCookie("counter");
var counterWidth = 6; // Sets overall number of digits in counter (aka significant digits)
var rootPath = "http://www.geocities.com/bevcuria/"; // Root path for counter images
document.write('<FONT COLOR=\"#cc0000\">');

if (visits) {
visits = parseInt(visits) + 1;
// visits = 7689; I just used this line for testing. Remove it
if (visits) visits = '' + visits;

var zeros = parseInt(counterWidth - (visits.length));
var numbers = parseInt(visits.length);

document.write('You have visited this page ');
document.write(insertZeros(zeros));
document.write(insertNumber(numbers));
document.write(' times.');

if (visits < 2) {
document.write('<BR><BR>');
document.write('<H2><FONT color="blue">This is your first visit.</FONT></H2>');
}
}

document.write("</FONT><BR><BR>");
document.write("Reload the page to see that the counter has incremented.");

setCookie("counter", visits);

function insertZeros(qty)
{
var htmlStr = "";
for (var i=0; i<qty; i++)
htmlStr += "<IMG SRC='" + rootPath + "0.GIF'>";
return htmlStr;
}

function insertNumber(digits)
{
var htmlStr = "";
for (var i=0; i<digits; i++)
htmlStr += '<IMG SRC="' + rootPath + visits.charAt(i) + '.GIF">';
return htmlStr;
}

</SCRIPT>

[SIZE=1][COLOR=blue]Thanks, Beetle. If you only knew how many hours I struggled with this little project! I'm going to try out both of your methods and will study them to be sure I learn from them.

Muchos gracias,

Beverley

No problem! let me know how it works for ya!