Dollycrazy Tuto Horloges

Tutoriel horloges.

Tout d'abord vous devez créer l'image qui ornera votre horloge (grâce à votre logiciel habituel ou Paint, si comme moi vous n'avez rien d'autre ! lol). Rien de plus simple : vous ouvrez Paint, dans les propriétés de l'image, vous définissez la taille (70X70), puis vous laisser aller votre inspiration... Ensuite vous enregistrez l'image en l'appelant "horloge1", comme ça vous vous y retrouverez si vous en créez plusieurs.

Voici des exemples : (ne me les volez pas s'il vous plait...)

Les deux images d'exemple font 70 pixels de haut et 70 pixels de large.

Ensuite, vous avez besoin du script html qui se trouve ci-dessous, copiez-le et collez-le entre les balises et du code html de la page sur laquelle vous voulez voir apparaitre votre horloge.

<SCRIPT LANGUAGE="JavaScript"> navvers = navigator.appVersion.substring(0,1); if (navvers > 3) navok = true; else navok = false; today = new Date; numero = today.getDate(); if (numero<10) numero = "0"+numero; mois = today.getMonth(); if (navok) annee = today.getFullYear(); else annee = today.getYear(); mois++; if (mois < 10) mois = "0" + mois; messageDate = numero + "/" + mois + "/" + annee; function HeureCheck() { krucial = new Date; heure = krucial.getHours(); min = krucial.getMinutes(); sec = krucial.getSeconds(); jour = krucial.getDate(); mois = krucial.getMonth()+1; annee = krucial.getFullYear(); if (sec < 10) sec0 = "0"; else sec0 = ""; if (min < 10) min0 = "0"; else min0 = ""; if (heure < 10) heure0 = "0"; else heure0 = ""; DinaHeure = heure0 + heure + ":" + min0 + min + ":" + sec0 + sec; which = DinaHeure if (document.all){ dynamic3.innerHTML='<center>00:00:00</center>' dynamic3.innerHTML='<FONT SIZE=1 FACE=" Arial"><B>'+which+'</B></FONT>'; } else if (document.layers){ document.dynamic1.document.dynamic2.document.write(''+which+'') document.dynamic1.document.dynamic2.document.close() } tempo = setTimeout("HeureCheck()", 1000) } </SCRIPT> </head> <body onLoad="HeureCheck()" onUnload="clearTimeout(tempo)"> <table border="0" cellspacing="0" cellpadding="0" width="50" height="50"> <tr> <td bgcolor="#FFFFFF" style="border: 1 solid #FF66CC " > <table summary="" border="0" width="100%" height="100%"> <tr>  <td background="#FFFFFF"><CENTER> <font color="#FF66FF">  <FONT SIZE=1 FACE="arial"><B><SCRIPT LANGUAGE="JavaScript"> document.write(messageDate); </SCRIPT> </B></FONT> <a href="http://www.dollycrazy.com" target="_blank">  </a> <a target="_blank" title="Horloge Dollycrazy" href="http://www.dollycrazy.com"> <img border="0" width="70" height="70" src="horloges/horloge_doll.gif"></a><a href="http://www.dollycrazy.com" target="_blank">  </a> <ilayer id="dynamic1" width=100% height=15><layer id="dynamic2" width=100% height=15><div id="dynamic3"></div></layer></ilayer> </font></CENTER>

Puis, pour changer les couleurs du fond et de la police, vous allez devoir chercher dans le code que je vous donne ci-dessus les parties qui ressemblent à ça :

**********

td bgcolor="#FFFFFF"

--> remplacer ce qui est en rouge par la couleur hexadécimale que vous souhaitez pour le fond derrière l'image (si c'est une image transparente).

**********

style="border: 1 solid #FF66CC

--> remplacer ce qui est en rouge par la couleur hexadécimale que vous souhaitez pour la couleur de la bordure de l'horloge.

**********

td background="#FFFFFF"

--> remplacer ce qui est en rouge par la couleur hexadécimale que vous souhaitez pour le fond autour de l'image.

**********

font color="#FF66CC"

--> remplacer ce qui est en rouge par la couleur hexadécimale que vous souhaitez pour la couleur des chiffres.

**********

http://www.dollycrazy.com

--> remplacer ce qui est en vert par l'adresse de votre site, il faut le faire à deux endroits .

**********

title="Horloge Dollycrazy"

--> remplacer ce qui est en vert par le nom de votre site.

**********

src="horloges/horloge_doll.gif"

--> remplacer ce qui est en rouge par l'url de votre image de fond.

**********

Vous devez maintenant enregistrer votre page, il est recommandé de l'appeler "pagehorloge1" pour mieux vous y retrouver.

**********

Créez maintenant la page sur laquelle vous allez distribuer vos horloge à vos visiteurs. Appellez la "pagehorloges". Il faut maintenant insérer le code ci-dessous.

<iframe src="pagehorloge1.html" width=78 height=106 MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no></iframe>

**********

iframe src="pagehorloge1.html"

--> remplacer ce qui est en bleu par l'url de votre page.

**********

Enfin, pour que vos visiteurs puissent prendre le code qui leur permettra de placer votre horloge sur leur site, il faut créer une zone de texte à côté de chaque horloge et y placer ce même code, en leur disant de le copier puis de le coller dans le code de la page sur laquelle ils souhaitent voir apparaître l'horloge.

Au fait, voilà à quoi ressemble mon horloge une fois finie ! Bon courage ! C'est pas facile de faire des horloges, et encore moins d'expliquer comment faire !!!
D'ailleurs c'est peut-être très mal expliqué alors n'hésitez pas à me poser des questions !