Live Clock using images

Uses images to display a clock.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<script language="JavaScript">

  if (document.images) { 
    digit1 = new Image; 
    digit1.src = "digit1.gif"; 
    digit2 = new Image; 
    digit2.src = "digit2.gif";
    digit3 = new Image; 
    digit3.src = "digit3.gif";
    digit4 = new Image; 
    digit4.src = "digit4.gif";
    digit5 = new Image; 
    digit5.src = "digit5.gif";
    digit6 = new Image; 
    digit6.src = "digit6.gif";
    digit7 = new Image; 
    digit7.src = "digit7.gif";
    digit8 = new Image; 
    digit8.src = "digit8.gif";
    digit9 = new Image; 
    digit9.src = "digit9.gif";
    digit0 = new Image; 
    digit0.src = "digit0.gif";
    digitam = new Image; 
    digitam.src = "digitam.gif";
    digitpm = new Image; 
    digitpm.src = "digitpm.gif";
    digitcolon = new Image;
    digitcolon.src = "digitcolon.gif";
    digitblank = new Image;
    digitblank.src = "digitblank.gif";
    }
    
function UpdateClock(){
    var time= new Date();
    hours = time.getHours();
    mins = time.getMinutes();
    if (!document.images) return;
    digit = mins % 10;
    document.images.minsones.src=eval("digit"+digit+".src");
    digit = (mins - (mins % 10))/10;
    document.images.minstens.src=eval("digit"+digit+".src");
    if (hours > 12)
      document.images.ampm.src=digitpm.src;
    else
      document.images.ampm.src=digitam.src;
    if (hours > 12) hours = hours - 12;
    digit = hours % 10;
    document.images.hoursones.src=eval("digit"+digit+".src");
    digit = (hours - (hours % 10))/10;
    document.images.hourstens.src=eval("digit"+digit+".src");
    document.images.colon.src=digitcolon.src;
    setTimeout("UpdateClock()",30000);

  }

   UpdateClock();
</script>
    <!--
        This script downloaded from www.JavaScriptBank.com
        Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    -->
Step 2: Place HTML below in your BODY section
HTML
Code:

    <!--
        This script downloaded from www.JavaScriptBank.com
        Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    -->
Step 3: must download files below
Files
Live_Clock_using_images.zip