473,320 Members | 1,817 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,320 software developers and data experts.

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

Similar topics

22
by: Fabian | last post by:
var preload1 = new Image(); preload1.src = "/pic/yay.gif"; var preload2 = new Image(); preload2.src = "/pic/nay.gif"; The above is meant to preload image files, yes? Problem is, it doesnt seem...
2
by: Julie | last post by:
Hi, I'm trying to change images on a website without reloading the whole page and use the following code to preload the images: var preloadFlag = false; function preloadImages() { if...
6
by: michaaal | last post by:
Is this the correct way to preload an image...? Var Image1 = new Image() ....And then when I'm ready to use the image I can do this...? Button1.src=Image1.src ....Or am I just telling...
2
by: windandwaves | last post by:
Hi Gurus Preloading images has got to be JS 101. However, it does not seem to be working. Here is the function that I am using. I added the alerts to make sure it is working and all the right...
40
by: Geoff Cox | last post by:
Hello, I am still having problems - apologies if the answer is in previous postings! I now have, in the header, <sctipt> var myimages=new Array();
2
by: sachaburnett | last post by:
Hi everyone! I'm new to Javascript and am finding so much useful information on this group, so thanks to you all! I have a question about preloading images for onmouseover/out effects and...
7
by: Inny | last post by:
Hello again, Im using the code below in a child page (popup), the images are called from the parent page. When the changer is running, the child page goes white between images. I realise this is...
7
by: Keith Hughitt | last post by:
Hi all, I am having trouble preloading images in a javascript application, and was wondering if anyone had any suggestions. Basically I have a bunch of images stored in a database as BLOBs. At...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.