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>Untitl ed 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","pi c2.jpg","pic3.j pg","pic4.jpg", "pic5.jpg") ;
var cycled_pic = document.getEle mentById("subje ct");
var pic_number = 0;
setInterval(cyc le, 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_cyc ler();">
</body>
</html>

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

Help would be appeciated--thanks/

Jul 20 '05 #1

Subscribe Reply

3903

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

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","pi c2.jpg","pic3.j pg","pic4.jpg", "pic5.jpg") ;
var cycled_pic = document.getEle mentById("subje ct");
var pic_number = 0;
setInterval(cyc le, 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>Untitl ed 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.create Element('img');
img.name = name;
img.id = name;
img.style.posit ion = 'absolute';
img.style.left = '100px';
img.style.top = '100px';
img.style.width = '118px';
img.style.heigh t = '90px';
img.style.visib ility = 'hidden';
img.src = name +'.jpg';
document.body.a ppendChild(img) ;
return img;
};

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

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

i = 0;
images[i].style.visibili ty = 'visible';
var interval_ID = setInterval(cyc le, 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******** ************@gi ganews.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.onlo ad = 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*****@litote s.demon.co.uk> wrote in message
news:bn******** ***********@new s.demon.co.uk.. .

"TheKeith" <no@spam.com> wrote in message
news:UY******** ************@gi ganews.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.onlo ad = 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.onl oad=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.onl oad=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******** ************@gi ganews.com...
<snip>

... . What exactly does 'cycled_pic.onl oad=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*****@litote s.demon.co.uk> wrote in message
news:bo******** **@hercules.bti nternet.com...

"TheKeith" <no@spam.com> wrote in message
news:qJ******** ************@gi ganews.com...
<snip>
... . What exactly does 'cycled_pic.onl oad=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

1351

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, then back to the first one. The code I came up with is the following: css = i = 0 max_i = 3

Python

3823

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 pixels high, full-width, transparent background - nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background - content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image...

HTML / CSS

1157

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 databases to track data at work. Well now my people have all these shortcuts on their computers and I thought I'd condense these databases into one database. I've dont this by creating a new database and then importing all the objects from the...

Microsoft Access / VBA

2409

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 an exception to be thrown): This one works but it's not the results I want. private void CreateImage1() {

C# / C Sharp

1468

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 http://phone.avioninc.com/asterisk/wami/graphics/phoneringing.gif -----here is the performance counter out put when i use the code .-------

C# / C Sharp

1436

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. I want to feed this function a URL, $image..and at the end of this code, I want to overwrite the $image file with the new watermarked $image file. Im getting an error stating that this file cannot be opened.

PHP

5569

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 ******************************************************** For this teeny job, please refer to: http://feeds.reddit.com/feed/8fu/?o=25

Microsoft Access / VBA

1399

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); @mysql_select_db($database) or die("Unable to select database"); $query="SELECT * FROM ut_players"; $result=mysql_query($query);

PHP

12871

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 g.DrawLine(..), but I have a lot of line. In C++ is a parameter XORPUT, but in C# I can't find it.

C# / C Sharp

8685

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

General

8612

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9171

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

C / C++

7743

AI Job Threat for Devs

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

Career Advice

6532

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5869

Couldn’t get equations in html when convert word .docx file to html file in C#.

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();...

C# / C Sharp

4625

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2342

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2008

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General