help with creating an image cycler

TheKeith

I'm doing an image cycler but can't figure out why it keeps getting hung up
on the third pic in the array? Here is what I have:

----------------------------------------------------------------------------
---------------------------------

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function pic_cycler () {
var pics = new Array
("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5 .jpg");
var cycled_pic = document.getElementById("subject");
var pic_number = 0;
setInterval(cycle, 1000);

function cycle(){
if (pic_number < 4) {
pic_number = pic_number + 1;
cycled_pic.src = pics[pic_number];
}
else {
pic_number = 0;
}
}
}
</script>
</head>
<body>
<img id="subject" src="pic1.jpg" width="118" height="90"
onLoad="pic_cycler();">
</body>
</html>

----------------------------------------------------------------------------
---------------------------------

Help would be appeciated--thanks/

Jul 20 '05 #1

Subscribe Post Reply

3877

Lee

TheKeith said:

I'm doing an image cycler but can't figure out why it keeps getting hung up
on the third pic in the array? Here is what I have:

What do you mean by "getting hung up on the third pic"?
Does that image not display?
Once displayed, does that image never change?
Are there any error messages?

Do you intentionally never show pic1.jpg after the first time?

Jul 20 '05 #2

TheKeith

"Lee" <RE**************@cox.net> wrote in message
news:bn*********@drn.newsguy.com...

TheKeith said:

I'm doing an image cycler but can't figure out why it keeps getting hung upon the third pic in the array? Here is what I have:

What do you mean by "getting hung up on the third pic"?
Does that image not display?
Once displayed, does that image never change?
Are there any error messages?

Do you intentionally never show pic1.jpg after the first time?

There are no error messages but when it reaches pic3.jpg, it just stays on
it--never goes to the next one; there's kind of a flicker when it reaches
pic3 as well. I see your point about never displaying pic1 after the first
time. I modified the script to look like this:

----------------------------------------------------------------------------
------------
<script type="text/javascript">
function pic_cycler () {
var pics = new Array
("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg","pic5 .jpg");
var cycled_pic = document.getElementById("subject");
var pic_number = 0;
setInterval(cycle, 1000);

function cycle(){
if (pic_number < 4) {
pic_number = pic_number + 1;
}
else {
pic_number = 0;
}
cycled_pic.src = pics[pic_number];
}
}
</script>
----------------------------------------------------------------------------
------------

I assume it solves the problem of the script never returning to pic1, but I
wouldn't know, as it still gets hung up on pic3.

Jul 20 '05 #3

TheKeith

I assume it solves the problem of the script never returning to pic1, but I wouldn't know, as it still gets hung up on pic3.

I just realizes it works in opera, but is also kind of messed up in mozilla.
I don't understand why this isn't running smoothly. I've been staring at the
script for the last half-hour, but I'm just stumped.

Jul 20 '05 #4

Albert Wagner

On Thu, 30 Oct 2003 19:19:06 -0500
"TheKeith" <no@spam.com> wrote:
<snip>

I just realizes it works in opera, but is also kind of messed up in
mozilla. I don't understand why this isn't running smoothly. I've been
staring at the script for the last half-hour, but I'm just stumped.

Hi, Keith.

I don't know, but I suspect that it's because you are trying to change
images with the use of .src. I have no idea how different browsers cache
loaded images nor what happens when you only have one <img> to hold each
..jpg in turn. There may also be a timeing problem because you are
trying to load each image within the timer. I recommend that you try
preloading all images into your program before attempting to animate
them. I may have misunderstood what you are trying to do, but here is
how I would have done it. This works in Opera 7.21 and Netscape 7.1.
YMMV :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function pic_cycler () {

var names = [
'pic0',
'pic1',
'pic2',
'pic3',
'pic4'
];

loadImage = function(name) {
var img = document.createElement('img');
img.name = name;
img.id = name;
img.style.position = 'absolute';
img.style.left = '100px';
img.style.top = '100px';
img.style.width = '118px';
img.style.height = '90px';
img.style.visibility = 'hidden';
img.src = name +'.jpg';
document.body.appendChild(img);
return img;
};

var cycle = function() {
images[i].style.visibility = 'hidden';
i = (i + 1) % images.length;
images[i].style.visibility = 'visible';
};

var images = new Array;
for(n = 0; n < names.length; n++) {
images.push(loadImage(names[n]));
};

i = 0;
images[i].style.visibility = 'visible';
var interval_ID = setInterval(cycle, 1000);
};
</script>
</head>
<body onLoad = 'pic_cycler()'>
</body>
</html>

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

Jul 20 '05 #5

Richard Cornford

"TheKeith" <no@spam.com> wrote in message
news:UY********************@giganews.com...

I just realizes it works in opera, but is also kind of messed up
in mozilla. I don't understand why this isn't running smoothly.
I've been staring at the script for the last half-hour, but I'm
just stumped.

An observation; you have placed an onload handler on the IMG element in
the HTML that calls the pic_cycler function and sets off the images
swapping by having the cycler function called by setInterval. However,
when the SRC of the IMG element is changed and a new image loads isn't
that going to re-trigger the onload handler and re-call pic_cycler,
setting off another setInterval to call cycler at one second intervals?
And isn't that going to happen every time you load a new image by
setting the SRC of the IMG element?. Meaning an ever increasing number
of setInterval timers calling an ever increasing number of instances of
the cycle function and all of them trying to set the image to their own
idea of the current point in the image sequence.

"kind of messed up in mozilla" is probably the least you should expect.
Try setting:-

cycled_pic.onload = null;

- in the pic_cycler function to ensure that the onload handler is only
called when the first image is loaded.

Richard.

Jul 20 '05 #6

TheKeith

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:bn*******************@news.demon.co.uk...

"TheKeith" <no@spam.com> wrote in message
news:UY********************@giganews.com...
I just realizes it works in opera, but is also kind of messed up
in mozilla. I don't understand why this isn't running smoothly.
I've been staring at the script for the last half-hour, but I'm
just stumped.

An observation; you have placed an onload handler on the IMG element in
the HTML that calls the pic_cycler function and sets off the images
swapping by having the cycler function called by setInterval. However,
when the SRC of the IMG element is changed and a new image loads isn't
that going to re-trigger the onload handler and re-call pic_cycler,
setting off another setInterval to call cycler at one second intervals?
And isn't that going to happen every time you load a new image by
setting the SRC of the IMG element?. Meaning an ever increasing number
of setInterval timers calling an ever increasing number of instances of
the cycle function and all of them trying to set the image to their own
idea of the current point in the image sequence.

"kind of messed up in mozilla" is probably the least you should expect.
Try setting:-

cycled_pic.onload = null;

- in the pic_cycler function to ensure that the onload handler is only
called when the first image is loaded.

YOU'RE RIGHT!!! That solved it. Instead of doing the
'cycled_pic.onload=null;', I just put the onload in the body tag. Problem
solved. Since I'm still learning js, so I don't like putting stuff in my
scripts that I don't understand. What exactly does 'cycled_pic.onload=null;'
mean. I know its intended effect, but exactly what is it doing and where is
it supposed to be placed? Thanks.

Jul 20 '05 #7

Richard Cornford

"TheKeith" <no@spam.com> wrote in message
news:qJ********************@giganews.com...
<snip>

... . What exactly does 'cycled_pic.onload=null;' mean.
I know its intended effect, but exactly what is it doing
It means - assign the value - null - to the - onload - property of the
object referred to by the cycled_pic local variable. cycled_pic has been
assigned a reference to the IMG element with the getElementById call.
That IMG element has had a function object created for it (based on the
code provided in the string value of your - onLoad - attribute in the
HTML) by the browser and a reference to that function object has been
assigned to the - onload - (all lowercase) property of the IMG element
so that the browser can call it as a method of the IMG element in
response to load events.

The statement replaces the reference to the load event handling function
with the - null - value and so prevents the browser from calling that
function in response to load events.
and where is it supposed to be placed? Thanks.

It would need to be used after a reference to the IMG element had been
assigned to the local variable and before the end of the function body.
It would probably make most sense to remove the reference to the load
handling function as soon as the reference to the element became
available.

Richard.

Jul 20 '05 #8

TheKeith

"Richard Cornford" <ri*****@litotes.demon.co.uk> wrote in message
news:bo**********@hercules.btinternet.com...

"TheKeith" <no@spam.com> wrote in message
news:qJ********************@giganews.com...
<snip>
... . What exactly does 'cycled_pic.onload=null;' mean.
I know its intended effect, but exactly what is it doing

It means - assign the value - null - to the - onload - property of the
object referred to by the cycled_pic local variable. cycled_pic has been
assigned a reference to the IMG element with the getElementById call.
That IMG element has had a function object created for it (based on the
code provided in the string value of your - onLoad - attribute in the
HTML) by the browser and a reference to that function object has been
assigned to the - onload - (all lowercase) property of the IMG element
so that the browser can call it as a method of the IMG element in
response to load events.

The statement replaces the reference to the load event handling function
with the - null - value and so prevents the browser from calling that
function in response to load events.
and where is it supposed to be placed? Thanks.

It would need to be used after a reference to the IMG element had been
assigned to the local variable and before the end of the function body.
It would probably make most sense to remove the reference to the load
handling function as soon as the reference to the element became
available.

Richard.

Got it. Thanks for the lesson Richard.

Jul 20 '05 #9

Similar topics

problem with a css cycler

by: Adriano Varoli Piazza | last post by:

Hello all I am trying to build a css cycler in python, to change the css used in a website every X number of days, using a list of files: the first X days it'd show file1, then file2, then file3,...

Python

help with CSS design

by: Joe | last post by:

I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design: - body background: fixed full page image - banner: fixed, 100...

HTML / CSS

Help with error message

by: Don Sealer | last post by:

I've been getting a message that says the network connection can't be found. What does that mean? Here's what I've been doing. Over the course of time I've developed about 8 or 10 fairly simple...

Microsoft Access / VBA

Help drawing a line

by: Steve Long | last post by:

Hello, (total GDI newbie) I'm having trouble drawing just a simple line to display in a picturebox. I just want a straight, dotdash line. I have two methods, one works and one doesn't (it cause...

C# / C Sharp

Performance issue part 2 (revised with all code) Please help

by: Raj Chudasama | last post by:

i have a need to load image from URL. the image is really small (gif) and i use the following code. but the code is too slow any1 have any alternative way(S)? here is the url...

C# / C Sharp

Need Help with GD Creating a Watermarked Image

by: ameshkin | last post by:

Hi, Im pretty new at PHP and need help with something very simple. I wrote a function which watermarks an image. The function works, but i can't figure out how to output the image into a file. ...

PHP

VB6 OR VBA & Webbrowser DOM Tiny $50 Mini Project Programmer help

by: gunimpi | last post by:

http://www.vbforums.com/showthread.php?p=2745431#post2745431 ******************************************************** VB6 OR VBA & Webbrowser DOM Tiny $50 Mini Project Programmer help wanted...

Microsoft Access / VBA

Need a little help with creating an image from MySQL data...

by: dieselfuelonly | last post by:

<?php //Connect to the database and select the data from the table $username="asdfasdf"; $password="asdfasdf"; $database="asdfasdf"; mysql_connect(localhost,$username,$password);...

PHP

Drawing xor line on picture box. HELP!

by: Macias | last post by:

Hi, Please help me, how I can make a line drawing on PictureBox similar to MS paint. I thinking about this: click and hold button, move mouse and relase button. I'm trying useing this...

C# / C Sharp

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

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,...

General

Problem With Comparison Operator <=> in G++

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,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server