Reloading different images every second

src_mag · Apr 11, 2005

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:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>My Frame</title>
<style type="text/css" id="mtmsheet"></style>
</head>
<body bgcolor = "#cedfea">
<h4 align="center">CAMERA #1</h4>
<img src="img0.jpg" name="image0" align=right></img>
<script language="javascript">setTimeout("window.location.reload(true)",1000);</script>

</body>
</html>

Any idea on how I could modify this script to load a different image
at each refresh? Any feedback is greatly appreciated.

Thanks.
SRC

RobG · Apr 12, 2005

src_mag said:
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).

<h4 align="center">CAMERA #1</h4>
<img src="img0.jpg" name="image0" align=right></img>

End tags on <img> elements are forbidden.

<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 != 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>

Dr John Stockton · Apr 12, 2005

JRS: In article <[email protected]>, dated Tue, 12
Apr 2005 01:48:59, seen in RobG

All this script does is re-load the page every second. What you seem

setInterval("swapImage()",1000);

On at least some browsers, that will not re-load *every* second. It
will re-load at intervals of one second, perhaps plus overhead, rounded
up to a timer tick.

It probably does not matter to the OP, unless his images are of a clock;
but be should know of the effect, in case it matters.

<URL:http://www.merlyn.demon.co.uk/js-date0.htm#TaI> refers.

src_mag · Apr 13, 2005

Hello Rob,

Thanks for your excellent input. I appreciate your help.

SRC

RobG said:
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.

....

Flip-Cards with Local Images	1	Mar 27, 2023
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Jquery not triggering / acting as expected.	0	Mar 6, 2022
Add recipes using JavaScript in table	20	Apr 17, 2023
How to have two html audio players on one page?	0	May 3, 2022

Reloading different images every second

src_mag

RobG

Dr John Stockton

src_mag

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads