473,770 Members | 1,806 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.image s) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
var preloadFlag = false;
function preloadImages() {
if (document.image s) {
index_01_test1 = newImage("image s/index_01-test1.gif");
index_01_test2 = newImage("image s/index_01-test2.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY ONLOAD="preload Images();">

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

</BODY>
</HTML>
Oct 26 '05 #1
1 1425
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.image s) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
var preloadFlag = false;
function preloadImages() {
if (document.image s) {
index_01_test1 = newImage("image s/index_01-test1.gif");
index_01_test2 = newImage("image s/index_01-test2.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY ONLOAD="preload Images();">

<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
3137
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 to be doing so in practice. Any idea where Im going wrong? Could it be that things work differnetly when in an attached .js file? -- --
2
1904
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 (document.images) { pic_moon2_click = newImage("images/moonpic2.jpg"); pic_moon3_click = newImage("images/moonpic3.jpg");
6
1589
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 Button1 to use the same source path as Image1?
2
1858
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 alerts show up, yet when I do my mouseover, it still takes about a second (only the first time) to load the image (thumbnail). Am I missing anything?
40
2847
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
2985
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 found so many different ways to do it on the Net but am not sure about something. Right now I have the following code inside my <head> tag:
7
2456
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 happening because the Images are not cached (yet) on the users browser. I tried preloading images with the 2nd code below in the childpage head and in the parent page head and both. no joy, dosent seem to actually 'preload' the pics. (i also gave...
7
2000
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 any given point in time a subset of those images is displayed on- screen. At certains times I want to swap out those on screen with new ones from the database, and do some as seamlessly as possible. So what I've tried to do is first create Image...
0
9617
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10254
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10099
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8929
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6710
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5354
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5481
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4007
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3607
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.