By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,780 Members | 1,549 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,780 IT Pros & Developers. It's quick & easy.

Reloading different images every second

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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
Jul 23 '05 #2

P: n/a
JRS: In article <fO****************@news.optus.net.au>, dated Tue, 12
Apr 2005 01:48:59, seen in news:comp.lang.javascript, RobG
<rg***@iinet.net.auau> posted :
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.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #3

P: n/a
Hello Rob,

Thanks for your excellent input. I appreciate your help.

SRC

RobG <rg***@iinet.net.auau> wrote in message news:<fO****************@news.optus.net.au>...
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">


....
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.