0

I have the following code which works fine until I try and display graphics.
Please tell me how I could/should display the odometer in graphics format rather than text.
I have all the necessary images as .png(0 through 9) in the same folder as the following code. It is just that the text counter displays but not the graphics?

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function GraphicOdo(Nommer)
    {
    d = Nommer.toString();
    for (i=0; i<d.length; i++)
        {
        var image="<IMG SRC=c"+d[i]+".gif>";
//        alert(image);
        document.getElementById('GraphicCounter').innerHtml=image; 
        }
    }

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
GraphicOdo(c);
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div id="GraphicCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>
2
Contributors
5
Replies
6
Views
6 Years
Discussion Span
Last Post by Taywin
0

If you are using JavaScript to display images, it must be either all images are loaded or you call the server to render the HTML portion with image.

Please remember that JavaScript is client side and will read only the current loaded data of the page. The page cannot display different images by only changing/updating image tag source or rewrite innterHTML.

What you may do is to load all images but hide them somewhere in the page (using CSS). Then, you update the CSS for each image you want to display/hide according to the value you read.

0

I cannot agree with what you say as if you look at http://www.k9t.za.net/odometer/ you will see that images are being loaded and displayed.
The problem now is that 10 is showing image 0 rather than image 1 followed by image 0.
It would also follow that 123 would display image 3 rather than image 1 image 2 image 3.

0

Interesting. Didn't know that FF now allows that to happen. Thanks for showing me.

Anyway, back to your code at line 20 to 22, you print the time out to text box and then change your display, so the image is always 1 number ahead of the output on the text box.

In your code line 14, notice that you keep rewriting innerHTML in the loop. As a result, the last number (image) is written to the innerHTML.

Edit: If you actually look, the image display is flickering because you keep rewriting innerHTML which causes the DOM to change. A way to fix this is to load all images on the page first, and use CSS & JavaScript to update the display.

Edited by Taywin: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.