This may be a duplicate of suggestions by others, but here is how I do it on my cam pages. Example pages are
here and
here (daytime only)1. The following is the code on the actual page, placed where you want the pic to appear:
<form name="webCam" action="#"><img onload="startClock()" src="new.gif"> Image below will refresh every 5 seconds for two minutes - Auto-refresh in: <input type="text" name="timer" size="2"> seconds.
<img src="/toshibafixed/toshibafixed.jpg" name="webCamImage" alt="Refreshes every 5 seconds..." title="Refreshes every 5 seconds..." width="640" height="480" border="0">
</form>
Replace the img src with the path and name of your image, also update the size. Note that it must be the same as the var camImage in the .js file below.
2. The page has a script reference at the beginning:
<script type="text/javascript" src="camcountertoshiba.js"></script>
You can name the .js file anything you want, but it must match the name of the file below
3. The javascript file on disk is named camcountertoshiba.js and is a simple text file:
var camImage = 'toshibafixed/toshibafixed.jpg';
var refreshIntervalSeconds = 5;
var secondsLeft = refreshIntervalSeconds;
var reloadCount = 24;
function startCount() {
if (reloadCount < 1) {
document.webCam.timer.value = "-----";
return;
} else {
startClock();
}
}
function startClock() {
if (secondsLeft > 0) {
if (secondsLeft < 10) {
document.webCam.timer.value = '0' + secondsLeft;
} else {
document.webCam.timer.value = secondsLeft;
}
secondsLeft = secondsLeft - 1
timerID = setTimeout('startClock()', 1000);
} else {
date = new Date();
imageNumber = date.getTime();
document.webCamImage.src = camImage + '?' + imageNumber;
secondsLeft = refreshIntervalSeconds;
reloadCount = reloadCount - 1;
startCount();
}
}
The variables in the above are pretty apparent.
- var refreshIntervalSeconds = 5; HOW LONG BETWEEN RELOADS
- var reloadCount = 24; HOW MANY TIMES IT SHOULD RELOAD. 24 RELOADS WITH 5 SECONDS BETWEEN = 2 MIN
If you need help, jus let me know and I'll try.