473,218 Members | 1,700 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,218 software developers and data experts.

Reloading different images every second

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
3 12240
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: aurora | last post by:
I am looking for a way for reloading updated modules in a long running server. I'm not too concerned about cascaded reload or objects already created. Just need to reload module xxx if the...
2
by: DiggidyMack69 | last post by:
Hello folks I have a rolling image script that works fine except that the images do not seem to be preloading properly. The images are still being pulled on every interval from the server...
2
by: Snolly | last post by:
Hi all, Here is my issue. I have a web page (lets call it page1) with an iframe in it that then opens a pop-up window (page2). The pop-up window is used to edit some data that was loaded into...
2
by: Dev | last post by:
Dear Friends, I have 20 images in Array list.How do display the images into picture box every 1 second.If anyone knows please let me know....I don't want reload the form.The images are comming...
2
by: mikeoley | last post by:
Ok I have a Javascript slideshow working. Every image is linked to a another page in the site. Problem is...The link wont refresh to the next link once the second images rollovers in the slideshow....
61
by: phil-news-nospam | last post by:
Why does SVG need a different tag than other images? IMHO, SVG should be implemented as an image type just like any other image type, allowing it to work with <img> tags, and ... here is the...
6
by: ipy2006 | last post by:
Other than the JavaScript of timing and rotating images every few seconds or minutes, is there a way to uniquely load a different picture every time a browser open a page? Thanks, yip
7
by: John Nagle | last post by:
I'm converting a web app from CGI to FCGI. The application works fine under FCGI, but it's being reloaded for every request, which makes FCGI kind of pointless. I wrote a little FCGI app which...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.