Copy all the script below between the <head> and </head> tags of your webpage :
<script language="JavaScript" type="text/javascript">
<!--
var IdChrono = ''; // Vide par défaut mais j'y remet cete valeur quand arrêt refresh auto
var RefreshDelay = 60; // Valeur par défaut en secondes
function reload_images() {
var now_dh = new Date(); // On envoie un paramètre différent à chaque fois à la page pour tromper le navigateur afin qu'il n'aille pas chercher cette image en cache mais qu'il télécharge la nouvelle
if (document.images) {
// alert("reload_images" + "\n" + "Chargement image toutes les " + RefreshDelay + " s" + "\n" + "IdChrono = " + IdChrono + "\n" + "Date universelle :" + "\n" + now_dh + "\n" + "en millisecondes depuis 01/01/1970 :" + "\n" + now_dh.getTime());
document.images.ImgWebCam.src = '../Captures/webcam_throb.jpg' + '?' + String(now_dh.getTime()); // Pas besoin de escape() car il n'y pas de caractères à la con, le String() n'est pas obligatoire
}
}
function refresh_on_off() { // Ne pas Oublier de mettre cette fonction dans <body onload= >
// var x = document.MonForm1.ButtonOnOff.value; // Si le bouton est dans le <form> on peut faire comme ça, c'est plus propre
// alert(x); // Mais le <form> sert à envoyer un formulaire avec paramètres dans l'url donc ça recharge la page et donc ça réinitialise RefreshDelay
var ValButtOnOff = document.getElementById("ButtonOnOff").value // Ne marche pas avec getElementByName qu'avac getElementById
// alert("refresh_on_off" + "\n" + "ValButtOnOff = " + ValButtOnOff);
if (ValButtOnOff == "Off -> On") {
document.getElementById("InputDelay").value = String(RefreshDelay); // On remet à sa valeur, mais ça ne relance pas l'event quand modif InputDelay
auto_refresh(true); // Donc on le rappelle
// alert("Rafraîchissement automatique activé.");
} else if (ValButtOnOff == "On -> Off") {
stop_refresh();
} else {
alert("Tu t'es gourré dans la valeur du bouton On Off Tom");
}
}
function auto_refresh(ReloadNow) { // Ne pas Oublier de mettre cette fonction dans <body onload= >
// alert("auto_refresh" + "\n" + "RefreshDelay = " + RefreshDelay + " s IdChrono = " + IdChrono);
if (!(IdChrono == '')) { // ! veut dire not
clearInterval(IdChrono); // Sinon on a 2 timer en même temps
}
verify_delay(document.getElementById("InputDelay").value); // document.MonForm1.InputDelay.value);
IdChrono = setInterval('reload_images()', RefreshDelay*1000); // 5000 = 5 secondes
// alert("auto_refresh" + "\n" + "IdChrono = " + IdChrono);
document.getElementById("ButtonOnOff").value = "On -> Off"; // document.MonForm1.ButtonOnOff.value = "On -> Off";
if (ReloadNow) {
reload_images();
}
}
function stop_refresh() {
verify_delay(document.getElementById("InputDelay").value); // Je fais quand même pour stocké RefreshDelay
clearInterval(IdChrono);
IdChrono = '';
document.getElementById("ButtonOnOff").value = "Off -> On"; // document.MonForm1.ButtonOnOff.value = "Off -> On";
document.getElementById("InputDelay").value = ''; // On y remettra RefreshDelay quand on réactivera, et ça ne relance pas l'event quand modif InputDelay // document.MonForm1.InputDelay.value
// alert("Rafraîchissement automatique stoppé.");
}
function verify_delay(TampText) {
if (TampText == null) { TampText = ''; } // Sinon cette fonction s'arrête là, TampInt sera isNan
TampText = TampText.replace(/,/, '.');
var TampInt = Number(TampText);
TampInt = Math.round(TampInt);
// alert("verify_delay" + "\n" + "TampInt = " + TampInt + " s RefreshDelay = " + RefreshDelay + " s");
if (!(isNaN(TampInt) || (TampInt < 2) || (TampInt > 999))) { // (TampInt == null) NON, pas la même chose que isNan()
RefreshDelay = TampInt;
// alert("verify_delay" + "\n" + "TampInt = " + TampInt + " s RefreshDelay = " + RefreshDelay + " s");
}
document.getElementById("InputDelay").value = String(RefreshDelay); // On remet à valeur corrigée, et ça ne relance pas l'event quand modif InputDelay // document.MonForm1.InputDelay.value
}
//-->
</script>
Add this in the body tag: <body onload="auto_refresh(false)">
It will launch the auto refresh when opening webpage.
Put each line below anywhere between the <body onload="auto_refresh(false)"> and </body> tags of your webpage :
The image you want to refresh :
<img src="../Captures/webcam_throb.jpg" name="ImgWebCam" width="320" height="240" border="0" />
And the InputDelay and the Buttons :
<input type="text" id="InputDelay" size="4" onChange="auto_refresh(true)" />
<input type="button" id="ButtonOnOff" onclick="refresh_on_off()" value="???" />
<input type="button" id="ButtRefreshNow" onclick="reload_images()" value="Refresh now" />
Optional, you can add this line to display if Javascript not activate :
<noscript><em>JavaScript not activated</em></noscript>
You should search src="../Captures/webcam_throb.jpg" and replace it by the link of the picture you want to refresh There should be 2 occurrences.
Mon
ex-site Free sur lequel il y a quelques petits exemples de JavaScript.