469,360 Members | 1,799 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,360 developers. It's quick & easy.

Preloading and switching images ...


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>
Oct 26 '05 #1
1 1328
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
Oct 26 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

22 posts views Thread by Fabian | last post: by
6 posts views Thread by michaaal | last post: by
2 posts views Thread by windandwaves | last post: by
40 posts views Thread by Geoff Cox | last post: by
2 posts views Thread by sachaburnett | last post: by
7 posts views Thread by Keith Hughitt | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.