Wim I'm been working so hard in figure out what i need to change to have a 24hr be 12hr...

here is the html file can you help me out! please!!!

<html>
<head>
<title>Widget by kelkun89</title>
<base href="Widget/"/>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
dg0 = new Image();dg0.src = "dg0.gif";
dg1 = new Image();dg1.src = "dg1.gif";
dg2 = new Image();dg2.src = "dg2.gif";
dg3 = new Image();dg3.src = "dg3.gif";
dg4 = new Image();dg4.src = "dg4.gif";
dg5 = new Image();dg5.src = "dg5.gif";
dg6 = new Image();dg6.src = "dg6.gif";
dg7 = new Image();dg7.src = "dg7.gif";
dg8 = new Image();dg8.src = "dg8.gif";
dg9 = new Image();dg9.src = "dg9.gif";
dgc = new Image();dgc.src = "dgc.gif";
dgz = new Image();dgz.src = "dgz.gif";
dgb = new Image();dgb.src = "dgb.gif";
function dotime(){
theTime=setTimeout('dotime()',1000);
d = new Date();
hr= d.getHours()+100;
mn= d.getMinutes()+100;
se= d.getSeconds()+100;
if(hr==100){hr=100;am_pm='am';}
else if(hr<112){am_pm='am';}
else if(hr==112){am_pm='pm';}
else if(hr>112){am_pm='pm';hr=(hr-0);}
tot=''+hr+mn+se;
if (se%2==0){document.c.src = 'dgz.gif';}
else {document.c.src = 'dgc.gif';}
document.hr1.src = 'dg'+tot.substring(1,2)+'.gif';
document.hr2.src = 'dg'+tot.substring(2,3)+'.gif';
document.mn1.src = 'dg'+tot.substring(4,5)+'.gif';
document.mn2.src = 'dg'+tot.substring(5,6)+'.gif';
}
dotime();
function calendarDate ( )
{
var this_weekday_name_array = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi ","Vendredi","Samedi")
var this_month_name_array = new Array("Janvier","Fevrier","Mars","Avril","Mai","Ju in","Juillet","Aout","Septembre","Octobre","Novemb re","Decembre") //predefine month names
var this_date_timestamp = new Date()
var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()
var this_year = this_date_timestamp.getYear()
if (this_year < 1000)
this_year+= 1900;
if (this_year==101)
this_year=2001;
var month = this_date_timestamp.getMonth();
document.getElementById("date").firstChild.nodeVal ue = this_weekday_name_array[this_weekday] + " " + this_date
document.getElementById("mois").firstChild.nodeVal ue = this_month_name_array[this_month] //concat long date string
}
// -->
</script>
</head>
<body onLoad="onLoad();">
<div id="wall">
<img src="images/wall2.png" width="320" height="480"/>
</div>
<div id="elice_g">
<img src="images/elice_g.png" width="34" height="34"/>
</div>
<div id="elice_d">
<img src="images/elice_d.png" width="34" height="34"/>
</div>
<div id="cadre_diapo">
<img src="images/cadre_diapo.png" width="60" height="85"/>
</div>
<div id="image_1">
<img src="diapo/1.png" width="60" height="85"/>
</div>
<div id="image_2">
<img src="diapo/2.png" width="60" height="85"/>
</div>
<div id="image_3">
<img src="diapo/3.png" width="60" height="85"/>
</div>
<div id="image_4">
<img src="diapo/4.png" width="60" height="85"/>
</div>
<div id="image_5">
<img src="diapo/5.png" width="60" height="85"/>
</div>
<div id="image_6">
<img src="diapo/6.png" width="60" height="85"/>
</div>
<div id="image_7">
<img src="diapo/7.png" width="60" height="85"/>
</div>
<div id="image_8">
<img src="diapo/8.png" width="60" height="85"/>
</div>
<div id="image_9">
<img src="diapo/9.png" width="60" height="85"/>
</div>
<div id="image_10">
<img src="diapo/10.png" width="60" height="85"/>
</div>
<div id="image_11">
<img src="diapo/11.png" width="60" height="85"/>
</div>
<div id="image_12">
<img src="diapo/12.png" width="60" height="85"/>
</div>
<div id="image_13">
<img src="diapo/13.png" width="60" height="85"/>
</div>
<table><tr><td>
<span id="date">
<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script></span>
</tr></td></table>
<table><tr><td>
<span id="mois">
<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script></span>
</tr></td></table>
<table style="position: absolute; top: -60px; left: 90px; width: 320px; height: 461px;" cellspacing="" cellpadding="" align="center">
<td height="40" border="0">
<img src="dgc.gif" name="hr1" width="25" heigth="30">
</td></table>
<table style="position: absolute; top: -60px; left: 118px; width: 320px; height: 461px;" cellspacing="" cellpadding="" align="right">
<td height="40" border="0">
<img src="dgc.gif" name="hr2" width="25" heigth="30"><img
src="dgz.gif" name="c" width="22" heigth="69">
</td></table>
<table style="position: absolute; top: -60px; left: 170px; width: 320px; height: 461px;" cellspacing="" cellpadding="" align="right">
<td height="40" border="0">
<img src="dg8.gif" name="mn1" width="25" heigth="30">
</td></table>
<table style="position: absolute; top: -60px; left: 196px; width: 320px; height: 461px;" cellspacing="" cellpadding="" align="center">
<td height="40" border="0">
<img src="dg8.gif" name="mn2" width="25" heigth="30">
</td></table>
<table style="position: absolute; top: -60px; left: 104px; width: 320px; height: 461px;" cellspacing="" cellpadding="" align="center">
<td height="40" border="0">
<img src="dgc.gif" name="hr3" width="25" heigth="30">
</td></table>
<iframe id="frame" name="animation" src="Weather/Weather.html" width="320" height="480" scrolling="no" frameborder="0" marginwidth="0"
marginheight="0" allowtransparency="true"></iframe>
</body></html>