Tanja's Gifbildli

Bilder, Grafiken, JavaScript, HTML-- Kalenderuhr-Tutorial --Bilder, Grafiken, JavaScript, HTML

Um dieses Tutorial nachzubasteln brauchst Du:

- Ein von Dir selbst erstelltes Bild oder ein Fertigbild Deiner Wahl -

- Eine Homepage, auf der Du die Kalenderuhr im HTML einbauen kannst -

1--Erstelle zuallererst ein Bild in der Größe 275x175px.. Du kannst das Bild z.B. passend zu den Farben und dem Design Deiner Homepage gestalten.. Oder aber auch komplett anders, Deiner Fantasie sind hier keinerlei Grenzen gesetzt...

Mein Bild welches ich passend zu meiner Page gestaltet habe, schaut nun z.B. so aus:

Solltest Du selbst kein Bild erstellen können, so schnapp Dir einfach ein schönes Fertigbild Deiner Wahl, und verkleinere und/oder beschneide es auf die Größe 275x175px...

2--Speichere Dein 275x175px großes Bild nun als jpg Datei (oder wenn es animiert ist als gif Datei) in einen Ordner Deiner Wahl.. Lade Dein Bild nun auf Deinen Webserver hoch..!!

3--Nun kopierst Du Dir hier den HTML-Code für Deine Kalenderuhr:

<CENTER><TABLE id=table style="BORDER: collapse" bgcolor=#000000 cellSpacing=2 cellPadding=0 border=0> <tr> <td> <CENTER><TABLE id=table1 style="BORDER: collapse" bgcolor=#ffffff cellSpacing=0 cellPadding=0 border=0> <TR height=175> <TD align="center"> <IMG height=175 src="http://www.tanjas-gifbildli.ch/bild.jpg" width=275 border=0></TD></TR> <TR height=20> <TD align="center"> <font color="#000000" size="1" face="verdana"> <span id=clock> <SCRIPT language=JavaScript> var dayarray=new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag") var montharray=new Array("Januar","Februar","Maerz","April","Mai","Juni", "Juli","August","September","Oktober","November","Dezember") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() { d = new Date(); Time24H = new Date(); Time24H.setTime(d.getTime() + (d.getTimezoneOffset()*60000) + 3600000); InternetTime = Math.round((Time24H.getHours()*60+Time24H.getMinutes()) / 1.44); if (InternetTime < 10) InternetTime = '00'+InternetTime; else if (InternetTime < 100) InternetTime = '0'+InternetTime; } if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds var cdate=dayarray[day]+" « "+daym+". "+montharray[month]+" "+year+" » "+hours+":"+minutes+":"+seconds+" Uhr" if (document.all) document.all.clock.innerHTML=cdate else if (document.getElementById) document.getElementById("clock").innerHTML=cdate else document.write(cdate) } if (!document.all&&!document.getElementById) getthedate() function goforit(){ if (document.all||document.getElementById) setInterval("getthedate()",1000) } window.onload=goforit </SCRIPT> </span></font></b> </table></td></tr></table>

Baue diesen Code auf Deiner Homepage im HTML ein, dort wo Deine Kalenderuhr erscheinen soll..!!

4--Nun passen wir den HTML-Code noch Deiner Kalenderuhr an:

Bei #000000 gibst Du eine Farbe für den Rahmen Deiner Kalenderuhr an.. Bei #ffffff gibst Du eine Farbe für den Hintergrund Deiner Kalenderuhr an.. Bei http://www.tanjas-gifbildli.ch/bild.jpg gibst Du den genauen Pfad zu Deinem Bild auf Deinem Webserver an, welches Du vorher hochgeladen hast..!! Bei #000000 gibst Du eine Schriftfarbe für Deine Kalenderuhr an..

5--Das war's auch schon, nun musst Du nur noch die Seite mit Deiner Kalenderuhr auf Deinen Webserver hochladen, und fertisch.. Schon hast Du Deine eigene Kalenderuhr auf Deiner Homepage..