Solved

Refresh automatically?

Posted on 2000-05-09
5
238 Views
Last Modified: 2010-04-09
Hi,
I saw some homepages(forgot the URLs already) which contain some images which can refresh themselves automatically.  The most special is that only the images are changed(random image), but the whole page hadn't got reloaded.  Therefore, the visitor will not be disturbed by the refresh action of the images.

How can I achieve this?  Will "layer" help?
Thanks in advance.
PS.  Please don't suggest me to use frames.
0
Comment
Question by:nyt
  • 3
  • 2
5 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 50 total points
ID: 2791806
They use javascript:

<html>
<head>
<script>
myImageNames = new Array('image0','image1','image2','image3')
myImages = new Array();

/* preload */

if (document.images) {
   for (i=0;i<myImages.length;i++) {
      myImages[i] = new Image();
      myImages[i].src = myImageNames[i] +'.jpg';
   }
}

count = 0
function swap() {
   if (!document.images) return;
   count++;
   if (count > myImages.length) count = 0;
   document.images['banner'].src = myImages[count].src;
   setTimeout('swap()',5000);
}
</script>
</head>
<body onLoad="swap()">
<img src=image0.jpg name=banner>

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2791811
If you want just one new image each time the page is loaded you need to use cookies.

Michel
0
 

Author Comment

by:nyt
ID: 2791864
I use Netscape.
The code seems not working under Netscape.  Netscape gave me this error message:
"Line 21: myImages[count] has no properties."

How can I correct this so that the code can work under both Netscape and IE?
0
 

Author Comment

by:nyt
ID: 2791887
Moreover,
I prefer not using "Preload"...since the image files are actually changing with time.  That is something like a counter, the code loads the image file in regular intervals, so that the counter image can give the most updated info.

Of course, I am not do this for a counter.  Counter is used to explain what I want.

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2791906
Bug. I just whipped it up from the top of my head...

change

if (count > myImages.length) count = 0;

to

if (count >= myImages.length) count = 0;


To not preload use this:

<html>
<head>
<script>
myImages = new Array('image0.jpg','image1.jpg','image2.jpg','image3.jpg')
count = 0
function swap() {
   if (!document.images) return;
   count++;
   if (count >= myImages.length) count = 0;
   document.images['banner'].src = myImages[count];
   setTimeout('swap()',5000);
}
</script>
</head>
<body onLoad="swap()">
<img src=image0.jpg name=banner>

Michel
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now