Grafisk ur på din hjemmeside

Siden er opdateret 15. 6. 2006

Hvorfor skal uret være tekstbaseret, når det kan laves grafisk. Valget er helt frit. Vil du have et grafisk ur som det her viste, skal du lave det på denne måde:

Først laver du elleve små *.gif-filer f.eks. 15 pixels brede og 20 pixels høje. Navngiv filerne 0.gif, 1.gif 2.gif, 3.gif, 4.gif, 5.gif, 6.gif, 7.gif, 8.gif, 9.gif og kolon.gif. Filerne nul til ni skal naturligvis indeholde de tilsvarende cifre og kolon.gif skal have 2 prikker lodret over hinanden.

Dernæst skal du lave dette script i sidens <head>:

<script type="text/javascript">
function Ur()
{
tid = new Date();
tt = tid.getHours();
mm = tid.getMinutes();
ss = tid.getSeconds();

document.images[0].src=sti(tt/10);
document.images[1].src=sti(tt%10);

document.images[3].src=sti(mm/10);
document.images[4].src=sti(mm%10);

document.images[6].src=sti(ss/10);
document.images[7].src=sti(ss%10);

setTimeout("Ur();",1000);
}

function sti(tal)
{
tal = Math.floor(tal);
return tal + ".gif";
}
</script>

Derefter skal du, som ved det tekstbaserede ur udvidde <body>-kaldet sådan:

<body onload=Ur()>

Det vil være en fordel - især hvis du anvender noget større tal end jeg har brugt her på siden - om du lader brugerens browser hente tallene hjem, før siden bliver vist. Det gør du ved at tilføje dette script i sidens <head>:

<script type="text/javascript">
pict1=new Image(); pict1.src='1.gif';
pict2=new Image(); pict2.src='2.gif';
pict3=new Image(); pict3.src='3.gif';
pict4=new Image(); pict4.src='4.gif';
pict5=new Image(); pict5.src='5.gif';
pict6=new Image(); pict6.src='6.gif';
pict7=new Image(); pict7.src='7.gif';
pict8=new Image(); pict8.src='8.gif';
pict9=new Image(); pict9.src='9.gif';
pict10=new Image(); pict10.src='0.gif';
pict11=new Image(); pict11.src='kolon.gif'
</script>

Endelig skal du, der hvor uret skal være, anbringe denne kode:

<p>
<img src="0.gif" alt=""><img src="1.gif" alt="">
<img src="kolon.gif" alt="">
<img src="2.gif" alt=""><img src="3.gif" alt="">
<img src="kolon.gif" alt="">
<img src="4.gif" alt=""><img src="5.gif" alt="">
</p>

Her skal du specielt lægge mærke til taggen <p></p>, der sørger for, at holde tallene som en samlet blok i forhold til sidens øvrige indhold. Det er i princippet ligegyldigt hvilke tal, du kalder ind her, de bliver alligevel indenfor et sekund skiftet ud med korrekt tidsangivelse - forudsat du har husket at få hentet tallene, før siden vises. Ellers vil brugeren opleve lidt træghed de første ti sekunder.

En anden ting, du absolut SKAL være opmærksom på:

Koden til selve uret (indlæsning af de otte billeder) skal anbringes før nogen anden grafik på siden, ellers virker det ikke.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen august 2002
Hjemmesideskolen
Du er her: Forsiden - scripts - Grafisk ur på din hjemmeside
Brugere lige nu: Antal aktive brugere
Home Mail