Preloading and switching images ...

A

Alan Searle

I am a newby to javascript and would like to have a section on one page
where pictures change every 5 seconds.

I found some example sites which do what I want and I have tried to
'borrow' and adapt their source but without much luck.

In my tests I would just like two pictures (test1.gif and test2.gif) to
switch. I tried to assign these two to 'index_01' (see code below)
which should be loaded on startup.

In the code I cannot quite see how the 'index' links to the pictures
(and whether my naming is correct) and I am not sure how the timing is set.

Is there something I am missing? Is there other code that isn't present
in this source?

Maybe someone can take a quick look and tell me where I am going wrong
or can point me towards a good 'howto' (I have 'googled' on the
key-words but got swamped with garbage).

Thanks for any tips that you can give me.

Cheers,
Alan Searle

--------------------------------------------------
My skeleton test page ...

<HTML>
<HEAD>
<TITLE>Image Switch</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
index_01_test1 = newImage("images/index_01-test1.gif");
index_01_test2 = newImage("images/index_01-test2.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY ONLOAD="preloadImages();">

<IMG NAME="index_01" SRC="images/index_01.gif" WIDTH=190 HEIGHT=143 ALT="">

</BODY>
</HTML>
 
A

alu

"Alan Searle" wrote
I am a newby to javascript and would like to have a section on one page
where pictures change every 5 seconds.

I found some example sites which do what I want and I have tried to
'borrow' and adapt their source but without much luck.

In my tests I would just like two pictures (test1.gif and test2.gif) to
switch. I tried to assign these two to 'index_01' (see code below)
which should be loaded on startup.

In the code I cannot quite see how the 'index' links to the pictures
(and whether my naming is correct) and I am not sure how the timing is set.

Is there something I am missing? Is there other code that isn't present
in this source?

Maybe someone can take a quick look and tell me where I am going wrong
or can point me towards a good 'howto' (I have 'googled' on the
key-words but got swamped with garbage).

Thanks for any tips that you can give me.

Cheers,
Alan Searle

--------------------------------------------------
My skeleton test page ...

<HTML>
<HEAD>
<TITLE>Image Switch</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
index_01_test1 = newImage("images/index_01-test1.gif");
index_01_test2 = newImage("images/index_01-test2.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY ONLOAD="preloadImages();">

<IMG NAME="index_01" SRC="images/index_01.gif" WIDTH=190 HEIGHT=143 ALT="">

</BODY>
</HTML>


The good news is that the solution is relatively straightforward.
The bad news is your script isn't.
The first problem with the above is that neither of your two image preload
src's match your IMG tag's src.
Secondly, you likely won't need to preload the first image - an image
that's already being loaded in you IMG tag.
Thirdly, and most importantly, there is no timer to set your 5 second
interval to swap the images.

Do a google search on "javascript animation" - the outdated but
newbie-friendly Michael Schrenk JavaScript Animation Tutorial should get you
on the right path.

-alu
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top