Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    A graphic odometer

    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?
    Code:
    <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
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Code:
    document.getElementById('GraphicCounter').innerHTML=image;

  • Users who have thanked xelawho for this post:

    stockton (09-21-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    A graphic odometer

    Thank you, solved.

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Next step is how do I allow for multiple images.
    1 through 9 works fine but now how do I have two or more graphic images as in 10 thru 999999 display as graphics?
    BTW You can see what I am speaking of at http://www.k9t.za.net/odometer/
    Last edited by stockton; 09-21-2011 at 02:57 PM. Reason: More information

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    how about a little bit of simplification?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var c=0;
    var t;
    var timer_is_on=0;
    
    function timedCount()
    {
    document.getElementById('txt').value=c;
    c=c+1;
    document.getElementById('GraphicCounter').innerHTML="<IMG SRC=c"+c+".gif>";
    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>
    Last edited by xelawho; 09-21-2011 at 03:11 PM.

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am afraid the simplified version stops after the first display, namely displaying graphic !.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    yeah, sorry - that was a dud attempt. tried the edited version above - I think that works.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ah, no - I think I misunderstood the question. Are you asking that say when it clicks over to 10 how do you display a 1 and a 0 and once it clicks to 100, a 1 and a 0 and a 0 (supposing that you do not have 999999 separate graphics files)?

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you xelawho. That almost works but stops displaying images after 9.
    Last edited by stockton; 09-21-2011 at 03:51 PM.

  • #11
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    xelawho, Yes that is what I meant.
    Last edited by stockton; 09-21-2011 at 03:51 PM.

  • #12
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    jmrker, I could not get the example at that website working for me.

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    well, if that's the case, there's probably a fancier way of doing this but the hack method would be to set separate intervals calling separate functions. Below is how it would go up to 99 seconds...

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var c=0;
    var d=0;
    var t;
    var u;
    var timer_is_on=0;
    
    function secCount()
    {
    document.getElementById('txt').value=c;
    c=c+1;
    if (c==10){c=0}
    document.getElementById('secCounter').innerHTML="<IMG SRC=c"+c+".gif>";
    }
    
    function tenCount()
    {
    d=d+1;
    if (d==10){d=0}
    document.getElementById('tenCounter').innerHTML="<IMG SRC=c"+d+".gif>";
    }
    
    function doTimer()
    {
    if (!timer_is_on)
      {
      timer_is_on=1;
      t=setInterval("secCount()",1000);
      u=setInterval("tenCount()",10000);
      }
    }
    </script>
    </head>
    
    <body>
    <form>
    <input type="button" value="Start count!" onclick="doTimer()">
    <input type="text" id="txt" /><br /><br />
    <div style="float:left" id="tenCounter"></div><div style="float:left" id="secCounter">
    <img src="c0.gif" alt="zero"/>
    </div>
    </form>
    </body>
    </html>

  • #14
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    xelawho, sorry if I confused anyone but the display is not for timing.
    What I need for 10, as an example, to display the image for one followed by the image for zero and following from that 101 would be c1.gif c0.gif c1.gif and 1234 should be c1.gif c2.gif c3.gif c4.gif.
    I hope that this makes things a little clearer.

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    kind of assumed that... that's what the code in #13 does, up to 99 (and then I assume you can figure out how to replicate from there, but if not, post back)

    or am I still missing the point?


  •  
    Page 1 of 2 12 LastLast

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •