Graphisme Caro

Heure et date en image

Vous voulez afficher une petite image comme celle-ci avec la date et l'heure pour votre site web ? Je vous montre comment faire ici. Tout d'abord ayez une image de 100x100 et chargez la sur votre serveur. Mon image se nomme c41.gif Ouvrez front page ou le programme avec lequel vous faîtes votre site web et ouvrir une nouvelle page. Copiez TOUT le code et collez le dans votre onglet html en prenant soin de supprimer tout ce qu'il y a déjà.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Caro Tuts</title> <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='<B>'+which+'</B>'; } else if (document.layers){ document.dynamic1.document.dynamic2.document.write(''+which+'') document.dynamic1.document.dynamic2.document.close() } tempo = setTimeout("HeureCheck()", 1000) } </SCRIPT> <style type="text/css">  </style> </head> <body> <table border="0" cellspacing="0" cellpadding="0" width="50" height="50"> <tr> <td bgcolor="#279eeo" style="border: 1 solid #279eeo" > <table summary="" border="1" width="100%" height="100%" bordercolor="#C4DBF5" bgcolor="#000000"> <tr> <td background="#279eeo"><CENTER> <B><SCRIPT LANGUAGE="JavaScript"> document.write(messageDate); </SCRIPT> </B>  <a target="_blank" title="Caro Tuts" href="http://carotut.site.voila.fr"> <img border="0" src="c41.gif" width="100" height="120"></a>  <ilayer id="dynamic1" width=100% height=15><layer id="dynamic2" width=100% height=15><div id="dynamic3"></div></layer></ilayer> </CENTER> </td> </tr> </table> </tr> </table> </body> </html>

Ok, maintenant on va faire les changements nécessaires parce que vous avez présentement mes configurations à moi. Toujours dans l'onglet html, au début vous avez <title>Caro Tuts inscrivez le titre que vous voulez. À la fin, vous aurez ces changements à faire + amusez vous à changer les couleurs :

Vous pouvez également établir la couleur du texte, la police de caractère ainsi que sa grandeur :

Lancez un apperçu navigateur... C'est réussi ? Enregistrez votre page html du même nom que votre image. Par exemple mon image se nommait c41.gif donc ici je vais enregistrer ma page sous le nom de c41.htm et chargez la sur votre serveur. Je vous donne maintenant le code pour pouvoir insérer votre petite image à l'endroit désiré. Voici le code à insérer dans votre page html et prenez soin de changer l'url du site et le nom de la page htm ainsi que le width et height selon la grandeur d'image que vous aurez choisi:

Changez l'adresse URL (http://carotut.site.voila.fr/c41.htm) pour la vôtre et n'oubliez pas que l'extension doit être htm et non jpg. J'espère que ce tutoriel vous a plu. Bonne création !

Mes tutoriels vous aident dans la création de votre site ? Merci à l'avance si vous décidez de faire un lien vers mon site :))

«-Retour