Changing Images

W

Wade

08122005 1505 GMT-5

Hello. I am working on a webpage for the local school (just before
school starts). Their outside hired company really screwed things up.
Im trying to get their computers up and running and gain access to
their apps for them.

There is this code that flips through images for World History class. I
have removed the code from the page but the page still does not
function.

Im so very new to JS that while I understand what Im viewing, I do not
understand why it doesnt work.

Could somebody help me on this?

Wade


<HTML>
<HEAD>
<TITLE>CountDown</TITLE>
<script language="JavaScript">
<!-- hide from other browsers

//Pictures to switch inbetween

var Rollpic1 = "1.jpg"
var Rollpic2 = "2.jpg";
var Rollpic3 = "3.jpg";
var Rollpic4 = "4.jpg";

//Start at the what pic:
var PicNumber=AD1.png;

//Number of pics:
var NumberOfPictures=4;

//Time between pics switching in secs
var HowLongBetweenPic=5;

//SwitchPic Function
function SwitchPic(counter){

if(counter < HowLongBetweenPic){

counter++;

//DEBUG in the status bar at the bottom of the screen
window.status="Switch picture at 5 : "+counter+" PicNumber:
"+PicNumber+" ";

//Display pic in what <IMG> tag roll is what I called the image
document.roll.src = eval("Rollpic" + PicNumber);

//function calls itself
CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500);

}

else{
//if its not the last picture goto the next picture
if(PicNumber < NumberOfPictures){
PicNumber++;
SwitchPic(0);
}
//its the last picture go to the first one
else{
PicNumber=1;
SwitchPic(0);
}

}

}
// Stop hiding from old browsers -->
</script>
</HEAD>

<BODY onLoad="SwitchPic(0)">

<img src="1.jpg" border="0" name="roll">

</BODY>
</HTML>
 
M

McKirahan

Wade said:
08122005 1505 GMT-5

Hello. I am working on a webpage for the local school (just before
school starts). Their outside hired company really screwed things up.
Im trying to get their computers up and running and gain access to
their apps for them.

There is this code that flips through images for World History class. I
have removed the code from the page but the page still does not
function.

Im so very new to JS that while I understand what Im viewing, I do not
understand why it doesnt work.

Could somebody help me on this?

Wade

[snip]

Let's simplify it -- a lot!

<HTML>
<HEAD>
<TITLE>CountDown</TITLE>
<script type="text/JavaScript">
var pic = [
"1.jpg",
"2.jpg",
"3.jpg"
"4.jpg"
];
var pix = 0;
var sec = 2;
function pictures() {
document.roll.src = pic[pix];
window.setTimeout("pictures()",1000*sec);
(pix < pic.length-1) ? pix++ : pix=0;
}
</script>
</HEAD>
<BODY onLoad="pictures()">
<img src="1.jpg" name="roll" border="0" alt="">
</BODY>
</HTML>
 
A

ASM

Wade said:
08122005 1505 GMT-5

Could somebody help me on this?

<HTML>
<HEAD>
<TITLE>CountDown</TITLE>
<script language="JavaScript" type="text/javascript">
<!-- hide from other browsers

//Pictures to switch inbetween

if(document.images) {
Rollpic1 = new Image(); Rollpic1.src = "my_folder/my_photo_1.jpg"
Rollpic2 = new Image(); Rollpic2.src = "my_folder/my_photo_2.jpg"
Rollpic3 = new Image(); Rollpic3.src = "my_folder/my_photo_3.jpg"
Rollpic4 = new Image(); Rollpic4.src = "my_folder/my_photo_4.jpg"
}

//Number of pics:
var NumberOfPictures = 4;

// Counter of displayed Pictures
// starts at :
var Pictures = 1;

// Time between pics switching in secs : HowLongBetweenPics
// is given in argument of SwichPic function

// ------ SwitchPic Function -------

function SwitchPic(HowLongBetweenPics){
if(Pictures < NumberOfPictures){
//if it's not the last picture goto the next picture
Pictures++;
}
else{
// if it was the last picture goto the 1st picture
Pictures = 1;
}
//DEBUG in the status bar at the bottom of the screen
window.status="Switch picture at "+HowLongBetweenPics+
" : Rollpic"+Pictures+".src PicNumber : "+Pictures;
//Display pic in what <IMG> tag named 'roll'
document.images['roll'].src = eval("Rollpic"+Pictures+'.src');
//function calls itself
CallSwitchPic=setTimeout("SwitchPic()",HowLongBetweenPics*1000);
}
// Stop hiding from old browsers -->
</script>
</HEAD>

<BODY onLoad="SwitchPic(5)">

<img src="my_folder/my_photo_1.jpg" border="0" name="roll">

</BODY>
</HTML>
 
A

ASM

McKirahan said:
08122005 1505 GMT-5

Hello. I am working on a webpage for the local school (just before
school starts). Their outside hired company really screwed things up.
Im trying to get their computers up and running and gain access to
their apps for them.

There is this code that flips through images for World History class. I
have removed the code from the page but the page still does not
function.

Im so very new to JS that while I understand what Im viewing, I do not
understand why it doesnt work.

Could somebody help me on this?

Wade


[snip]

Let's simplify it -- a lot!

<HTML>
<HEAD>
<TITLE>CountDown</TITLE>
<script type="text/JavaScript">
var pic = [
"1.jpg",
"2.jpg",
"3.jpg"
"4.jpg"
];
var pix = 0;
var sec = 2;
function pictures() {
document.roll.src = pic[pix];

that will only work with IE
 
M

McKirahan

[snip]
document.roll.src = pic[pix];

that will only work with IE
[snip]


And Firefox but not Netscape.

Is there a solution?

I tried the following without success:

document.getElementById("roll").src = pic[pix];

<img src="1.gif" name="roll" id="roll" border="0" alt="">
 
W

Wade

08122005 1749 gmt-5

Ok. Tried that. Doesnt work on my pc.

Now, Im on linux using Firefox and Opera and there is no change on the
page.
I see that Stephane said that it works only with IE. The school is
moving to linux so firefox will be their browser as well.

Suggestion?

Wade
 
W

Wade

08122005 1803 GMT-5

Hey Stephane, this actually worked. Well, it works one time. It runs
the first and second pic but then stops.

Wade
 
A

ASM

Wade said:
08122005 1749 gmt-5

Ok. Tried that. Doesnt work on my pc.

Now, Im on linux using Firefox and Opera and there is no change on the
page.
I see that Stephane said that it works only with IE. The school is
moving to linux so firefox will be their browser as well.

Suggestion?

use what I did give on : 12/08/05 23:50
or
McKirahan's code modified as following :

<HTML>
<HEAD>
<TITLE>CountDown</TITLE>
<script type="text/JavaScript">
var pic = new Array(
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg");
var pix = 0;
var sec = 5;
function pictures() {
pix = (pix < pic.length-1) ? pix+1 : 0;
document.images['roll'].src = pic[pix];
departure = setTimeout("pictures()",1000*sec);
}
</script>
</HEAD>
<BODY onLoad="pictures()">
<img src="1.jpg" name="roll" border="0" alt="">
<p><a href="javascript:clearTimeout(departure);">[STOP]</a>
<a href="javascript:pictures();">[START]</a>
</BODY>
</HTML>

demo here :
http://perso.wanadoo.fr/stephane.moriaux/truc/count_pictures.htm
works with my IE and FF
 
A

ASM

Wade said:
08122005 1803 GMT-5

hey man, try to put some words of precedent post you answer

I'm lost ...
Hey Stephane, this actually worked. Well, it works one time. It runs
the first and second pic but then stops.

sea my last message on : 1:17
 
W

Wade

08122005 1840 GMT-5

One last thing. If you want this to run automatically when the page
opens up instead of hitting a button, how is that done?

Wade
 
R

Randy Webb

McKirahan said the following on 8/12/2005 6:38 PM:
[snip]

document.roll.src = pic[pix];

that will only work with IE

[snip]



And Firefox but not Netscape.

Is there a solution?

I tried the following without success:

document.getElementById("roll").src = pic[pix];

<img src="1.gif" name="roll" id="roll" border="0" alt="">

If you want to manipulate images, use the images collection:

document.images['imageNAMEnotID'].src= pic[pix];

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
 
R

Randy Webb

ASM said the following on 8/12/2005 7:17 PM:
Wade said:
08122005 1749 gmt-5

Ok. Tried that. Doesnt work on my pc.

Now, Im on linux using Firefox and Opera and there is no change on the
page.
I see that Stephane said that it works only with IE. The school is
moving to linux so firefox will be their browser as well.

Suggestion?


use what I did give on : 12/08/05 23:50
or
McKirahan's code modified as following :

<HTML>
<HEAD>
<TITLE>CountDown</TITLE>
<script type="text/JavaScript">
var pic = new Array(
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg");
var pix = 0;
var sec = 5;
function pictures() {
pix = (pix < pic.length-1) ? pix+1 : 0;
document.images['roll'].src = pic[pix];
departure = setTimeout("pictures()",1000*sec);
}
</script>
</HEAD>
<BODY onLoad="pictures()">
<img src="1.jpg" name="roll" border="0" alt="">
<p><a href="javascript:clearTimeout(departure);">[STOP]</a>
<a href="javascript:pictures();">[START]</a>

That is worse than what McK posted. Read the Group FAQ with regards to
javascript: pseudo-protocols.

<a href="whyMyPageDoesntWorkWithoutJS.html"
onclick="clearTimeout(....);return false">[STOP]</a>



--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
 
A

ASM

Wade said:
08122005 1840 GMT-5

One last thing. If you want this to run automatically when the page
opens up instead of hitting a button, how is that done?

That's run automatically

As it's a demo I added 2 link-buttons :
- 1 to stop
- 1 to re-start
(the 2nd is only to use after having stopped,
if not, you get a new loop on each new press on [start] )
 
A

ASM

Randy said:
ASM said the following on 8/12/2005 7:17 PM:
<p><a href="javascript:clearTimeout(departure);">[STOP]</a>
<a href="javascript:pictures();">[START]</a>

That is worse than what McK posted. Read the Group FAQ with regards to
javascript: pseudo-protocols.

Please follow threads before going in accessibility crusade.
<a href="whyMyPageDoesntWorkWithoutJS.html"
onclick="clearTimeout(....);return false">[STOP]</a>

Thanks to try to considere it's a simple "demo" ABOUT
a function in JAVASCRIPT that absolutly needs ENABLED JS
and not *The Holy Bible of JavaScripted Html in Strict* ... :)

The two added simili buttons are only to manipulate
the loop without having to refresh the page to re-start
 
R

Randy Webb

ASM said the following on 8/13/2005 6:14 AM:
Randy said:
ASM said the following on 8/12/2005 7:17 PM:
<p><a href="javascript:clearTimeout(departure);">[STOP]</a>
<a href="javascript:pictures();">[START]</a>


That is worse than what McK posted. Read the Group FAQ with regards to
javascript: pseudo-protocols.


Please follow threads before going in accessibility crusade.

It had not a thing to do with accessibility crusades. Add an animated
gif to your test page, click your test link, then come talk to me about
the javascript: pseudo-protocol. It had to do with a crappy way of
invoking a script.
<a href="whyMyPageDoesntWorkWithoutJS.html"
onclick="clearTimeout(....);return false">[STOP]</a>


Thanks to try to considere it's a simple "demo" ABOUT
a function in JAVASCRIPT that absolutly needs ENABLED JS
and not *The Holy Bible of JavaScripted Html in Strict* ... :)

At least learn the fallacies of your demo's before you talk about the
Holy Bible. Again, learn good habits, post good habits, and you never
post bad habits, even in Demos.
The two added simili buttons are only to manipulate
the loop without having to refresh the page to re-start

I know that, and understand that, but the way you went about invoking
the script is an idiotic, bad habit way of doing it (and you obviously
do not understand that). Had you bothered to read the FAQ I referred you
to, you would know that. Practice the way you play and you will always
practice the right way and it becomes habit.

On a sidenote:

Had it been an accessibility crusade, the "proper" way to do that is to
use a button and have JS dynamically create it, either through
document.write or createElement.
 
A

ASM

Randy said:
the way you went about invoking
the script is an idiotic, bad habit way of doing it (and you obviously
do not understand that).

I understand your meaning, and ordinary I agree with it.
But, here, I did on shorter
(without creating a special page for non-JS as if no JS -> no demo)
Had you bothered to read the FAQ I referred you

I do not need to read a faq to know how to build a javascripted link :-/
However,
I did go there : http://jibbering.com/faq
and asked to my browser to search : pseudo-protocols
-> no result :-(
Would you have a direct link to this subject ?
(for I can see what you exactly talk)
to, you would know that. Practice the way you play and you will always
practice the right way and it becomes habit.

Yes I'am all right.
On a sidenote:

Had it been an accessibility crusade, the "proper" way to do that is to
use a button and have JS dynamically create it, either through
document.write or createElement.

We did discuss on that and ... also I do agree
(it was not really the propose of this demo)
(did it be absolutly necessary to confuse nb with a lot of added code
without relation with the main subject - images dislplayed in loop - ?)

Didn't think a little *javascript* demo to display fiew images in loop
would result in a so much write on something only added for fiew conveniance
 
R

Randy Webb

ASM said the following on 8/13/2005 1:06 PM:
I understand your meaning, and ordinary I agree with it.
But, here, I did on shorter
(without creating a special page for non-JS as if no JS -> no demo)

I understand that totally, but using the javascript: as an href is bad
practice, even in demo pages.
I do not need to read a faq to know how to build a javascripted link :-/

No, but you need to read it to understand, and deal with, the inherent
problems with building them a certain way.
However,
I did go there : http://jibbering.com/faq
and asked to my browser to search : pseudo-protocols
-> no result :-(
Would you have a direct link to this subject ?
(for I can see what you exactly talk)

http://jibbering.com/faq/#FAQ4_24

It doesn't cover it explicitly in the FAQ, but it is a known side effect
of href="javascript: in some browsers to stop animated gifs from being
animated after it is clicked on.
Yes I'am all right.



We did discuss on that and ... also I do agree
(it was not really the propose of this demo)
(did it be absolutly necessary to confuse nb with a lot of added code
without relation with the main subject - images dislplayed in loop - ?)

Didn't think a little *javascript* demo to display fiew images in loop
would result in a so much write on something only added for fiew
conveniance

My problem is not with your Demo per se, its the improper use of
href="javascript: and the possible implications of people (new people
perhaps among others) that may read it and think "Oh, he did it so it's
ok" and then they end up here with problems with it.

I guess it's more about posterity and research problems/potential than
the demo itself.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,144
Latest member
KetoBaseReviews
Top