src_mag wrote:
Hello,
I'd like to write JavaScript code that refreshes a frame once a second
loading a different image each time. Basically, here's what the script
would do:
0 sec load img0.gif
1 sec load img1.gif
2 sec load img2.gif
3 sec load img0.gif (back to the first image)
4 sec load img1.gif
...etc...
I do have some code that reloads the frame every second, but it always
loads the same image:
Validate your HTML before posting, you are more likely to get answers
if what you post works except for the issue you need fixed.
<html>
No doctype. Usually not too much of a problem, but it can be the
source if errors as browsers behave differently depending on whether
they are in strict or quirks mode. In this case, they'll be in
quirks mode.
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>My Frame</title>
<style type="text/css" id="mtmsheet"></style>
Style elements are not allowed to have id attributes.
</head>
<body bgcolor = "#cedfea">
bgcolor is depreciated, use styles to set the background colour and
always set foreground colour to something reasonable at the same time
(taking note of guidelines for visually impaired and colour
blindness).
<body style="background-color: #cedfea; color: #330033;">
<h4 align="center">CAMERA #1</h4>
<img src="img0.jpg" name="image0" align=right></img>
End tags on <img> elements are forbidden.
<URL:http://www.w3.org/TR/html4/struct/objects.html#edef-IMG>
<script language="javascript">setTimeout("window.location. reload(true)",1000);</script>
The language attribute is depreciated, use the required type
attribute.
<script type="text/javascript">
All this script does is re-load the page every second. What you seem
to want to do is change the image source attribute, so write a
function that does it.
</body>
</html>
Any idea on how I could modify this script to load a different image
at each refresh? Any feedback is greatly appreciated.
Here is a script that loops through a set of images: put the images
in the picSet array. The script assumes the images are in the same
directory as the html file, add paths if not.
The image specified in the HTML must be in the array or the script
will run every second but because it can't find it in the array,
nothing will appear to happen.
Lightly commented & tested in Firefox and IE.
<img src="01.gif" name="XX" alt="Changing image">
<script type="text/javascript">
// Array of pictures to loop through
var picSet = ['01.gif','02.gif'];
// Function to change image
function swapImage(){
var i,x,j,n;
i = picSet.length;
j = document.images['XX'].src.split('/');
n = j[j.length-1];
// Find index of current image in array
while ( i-- && picSet[i] != n ){}
// Set new image to index + 1 or loop if beyond end of array
document.images['XX'].src = picSet[ (i+1) % picSet.length];
}
// Setup timer
setInterval("swapImage()",1000);
</script>
--
Rob
