Need Help with JavaScript code Please

#1 July 23rd, 2005, 11:43 AM

HI There,

I have been struggling with JavaScript code for days now, and this is
my last resort! Please help...

I am trying to create a JavaScript slide show with links for Next
Slide, Previous Slide and Home Slide.

Is it possible for you to view my page and tell me what I am doing
wrong. I have looked at this page for hours and can't figure it out, I
must be missing something or have something in the wrong order, but
can't figure it out...please help....thanks...

I think I need someone to explain the EXACT code for this page as it
would appear in the page so it displays correctly.

If you can figure this out, I have 2 more I need help with too...

Thanks so much, Much appreciated...Need a quick answer that will work!

Any ideas???? Can someone please tell me what I'm doing wrong, or what
I have missed out....

Here is my code:
<HTML>
<HEAD>
<TITLE>JavaScript Slide Show - PhotoAlbum</TITLE>

<SCRIPT LANGUAGE="JavaScript">

var PhotoAlbum = new
Array("bunny_lady.gif","business_lady.gif","runnin g_lady.gif","color_lady.gif")
var PicIndex=1
var pictures=PhotoAlbum.length

function NextImage ( ) {
if (PicIndex < pictures) {
PicIndex++
}
document.ImgAlbum.src=PhotoAlbum[PicIndex-1]
}

function PreviousImage ( ) {
if (PicIndex > 1) {
PicIndex--
}
document.ImgAlbum.src=PhotoAlbum[PicIndex-1]
}

function home ( ) {
document.ImgAlbum.src=PhotoAlbum[0]
}

</SCRIPT>
</HEAD>

<BODY BACKGROUND=BACK02.jpg TEXT=Blue>

<CENTER>

<H1 ALIGN=Center> The Vacation Photo Album</H1><BR>
<H3 ALIGN=Center> Click on Previous or Next to view pictures in my
Slide Show </H3><HR><HR>

<IMG SRC=bunny_purse.gif NAME= ImgAlbum Width=400 Height=270>
<BR>
<HR>
<A HREF="javascript:home ( ) ">[First Image]</A>
<A HREF="javascript:PreviousImage ( )">[Previous Image]</A>
<A HREF="javascript:NextImage ( )">[Next Image]</A>
</CENTER>

</BODY>
</HTML>

#2 July 23rd, 2005, 11:43 AM

TrvlOrm wrote:[color=blue]
> HI There,
>
> I have been struggling with JavaScript code for days now, and this is
> my last resort! Please help...
>
> I am trying to create a JavaScript slide show with links for Next
> Slide, Previous Slide and Home Slide.
>
> Is it possible for you to view my page and tell me what I am doing
> wrong. I have looked at this page for hours and can't figure it out, I
> must be missing something or have something in the wrong order, but
> can't figure it out...please help....thanks...
>
> I think I need someone to explain the EXACT code for this page as it
> would appear in the page so it displays correctly.
>
> If you can figure this out, I have 2 more I need help with too...
>
> Thanks so much, Much appreciated...Need a quick answer that will work!
>
> Any ideas???? Can someone please tell me what I'm doing wrong, or what
> I have missed out....
>
> Here is my code:
> <HTML>
> <HEAD>
> <TITLE>JavaScript Slide Show - PhotoAlbum</TITLE>
>
> <SCRIPT LANGUAGE="JavaScript">
>
> var PhotoAlbum = new
> Array("bunny_lady.gif","business_lady.gif","runnin g_lady.gif","color_lady.gif")
> var PicIndex=1
> var pictures=PhotoAlbum.length
>
> function NextImage ( ) {
> if (PicIndex < pictures) {
> PicIndex++
> }
> document.ImgAlbum.src=PhotoAlbum[PicIndex-1]
> }
>
> function PreviousImage ( ) {
> if (PicIndex > 1) {
> PicIndex--
> }
> document.ImgAlbum.src=PhotoAlbum[PicIndex-1]
> }
>
> function home ( ) {
> document.ImgAlbum.src=PhotoAlbum[0]
> }
>
>
> </SCRIPT>
> </HEAD>
>
> <BODY BACKGROUND=BACK02.jpg TEXT=Blue>
>
> <CENTER>
>
> <H1 ALIGN=Center> The Vacation Photo Album</H1><BR>
> <H3 ALIGN=Center> Click on Previous or Next to view pictures in my
> Slide Show </H3><HR><HR>
>
> <IMG SRC=bunny_purse.gif NAME= ImgAlbum Width=400 Height=270>
> <BR>
> <HR>
> <A HREF="javascript:home ( ) ">[First Image]</A>
> <A HREF="javascript:PreviousImage ( )">[Previous Image]</A>
> <A HREF="javascript:NextImage ( )">[Next Image]</A>
> </CENTER>
>
> </BODY>
> </HTML>[/color]

First your IMG tag change NAME= ImgAlbum to ID="ImageAlbum"

Then change all references of document.ImgAlbum.src to
document.getElementById("ImgAlbum").src this will make it compatible
with the more modern versions of netscape/mozilla/firefox.

Those are the obvious problems, check back if it doesn't work.

----------
http://www.hunlock.com -- DHTML for the masses.

#3 July 23rd, 2005, 11:43 AM

pcx99 wrote:
[color=blue]
> TrvlOrm wrote:
>[/color]
[color=blue][color=green]
>> <A HREF="javascript:home ( ) ">[First Image]</A>
>> <A HREF="javascript:PreviousImage ( )">[Previous Image]</A>
>> <A HREF="javascript:NextImage ( )">[Next Image]</A>
>> </CENTER>
>>
>> </BODY>
>> </HTML>[/color][/color]

http://www.jibbering.com/faq/#FAQ4_24
[color=blue]
>
>
> First your IMG tag change NAME= ImgAlbum to ID="ImageAlbum"
>
> Then change all references of document.ImgAlbum.src to
> document.getElementById("ImgAlbum").src this will make it compatible
> with the more modern versions of netscape/mozilla/firefox.
>
> Those are the obvious problems, check back if it doesn't work.[/color]

Change it to document.images['ImgAlbum'].src and it is both forwards
*and* backwards compatible. gEBI is not.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

#4 July 23rd, 2005, 11:43 AM

On Wed, 05 May 2004 08:11:40 GMT, pcx99 <x@x.com> wrote:

[snip]
[color=blue][color=green]
>> <HTML>
>> <HEAD>
>> <TITLE>JavaScript Slide Show - PhotoAlbum</TITLE>
>>
>> <SCRIPT LANGUAGE="JavaScript">[/color][/color]

This should read

<script type="text/javascript">

The type attribute is required whereas the language attribute is
deprecated and should not be used.

[snipped HTML]

Have a play with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Slideshow</title>


<style type="text/css">
body {
text-align: center;
}

button {
margin: 0 2px;
}

div#imgContainer {
border-bottom: 2px solid #000000;
border-top: 5px double #000000;
padding: 2px 0;
}

div#navigation {
margin-top: 5px;
}
</style>

<script type="text/javascript">
var current = 0;
var album = [
"bunny_lady.gif",
"business_lady.gif",
"running_lady.gif",
"color_lady.gif" ];

function nextImg() {
if( album.length == ++current ) {
current = 0;
}
showImg( current );
}

function prevImg() {
if( 0 > --current ) {
current = album.length - 1;
}
showImg( current );
}

function showImg( n ) {
document.images[ 'albumImg' ].src = album[ n ];
}
</script>
</head>

<body>

<h1>The Vacation Photo Album</h1>
<h2>Click on Previous or Next to view pictures in my Slide Show</h2>
<div id="imgContainer">
<img id="albumImg" alt="Photo" src="bunny_purse.gif" width="400"
height="270">
</div>
<div id="navigation">

<button type="button" onclick="prevImg()">Previous</button>
<button type="button" onclick="showImg(0)">Home</button>
<button type="button" onclick="nextImg()">Next</button>
</div>
</body>
</html>
[color=blue]
> First your IMG tag change NAME= ImgAlbum to ID="ImageAlbum"
>
> Then change all references of document.ImgAlbum.src to
> document.getElementById("ImgAlbum").src this will make it compatible
> with the more modern versions of netscape/mozilla/firefox.[/color]

The more sensible thing to do is use the images collection as this will
work in even the early Netscape browsers. You can index it with indicies
or a string that contains the name or id of the image.

Mike

--
Michael Winter
M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

#5 July 23rd, 2005, 11:44 AM

Mike, your code doesn't seem to work. I have imputted it in exactly as
you have, but the Previos and Next Images do not load...just comes
back saying error on page...
(JavaScript SlideShow)

What else have we missed out?

Thanks again....

<HTML>
<HEAD>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<TITLE>Exercise 8-3 JavaScript Slide Show - Discussion Forum
HELP</TITLE>

<STYLE TYPE="text/css">

BODY {
text=align: center;
}

Button {
margin: 0 2px;
}

div#imgContainer {
boder-bottom: 2px solid #000000;
boder-top: 5px double #000000;
padding: 2px 0;
}

div#navigation {
margin-top: 5px;
}
</STYLE>

<SCRIPT TYPE="text/javascript">
var current = 0;
var Imagealbum = [
"bunny_lady.gif",
"business_lady.gif",
"running_lady.gif",
"color_lady.gif"];

function nextImage();
if( album.length = +current ) {
current = 0;
}
showImage( current );
}

function prevImage() {
if( 0 > -current ) {
current = album.length - 1;
}
showImage( current );
}

function showImage( n ) {
document.images['Imagealbum'].src = alubum[ n ];
}
</SCRIPT>
</HEAD>

<BODY>

<H1> The Vacation Photo Album</H1>
<H2> Click on Previous or Next to view pictures in my Slide Show </H2>

<div id ="imageContainer">

<image id="Imagealbum" alt="Photo" src="bunny_purse.gif" width="400"
Height="270">
</div>

<div id="navigation">

<button type="button" onclick="prevImage()">Previous image</button>
<button type="button" onclick="showImage()">Home</button>
<button type="button" onclick="nextImage()">Next image</button>

</div>

</BODY>
</HTML>

#6 July 23rd, 2005, 11:44 AM

On 5 May 2004 12:51:50 -0700, TrvlOrm <ksorman@shaw.ca> wrote:
[color=blue]
> Mike, your code doesn't seem to work.[/color]

I can assure you it does. If you changed the BUTTONs to INPUTs of type
button, it would even work on NN4[1].
[color=blue]
> I have imputted it in exactly as you have, [...][/color]

No, you didn't. Even a cursory glance shows several instances where you
changed the name of some, but not all, occurances of an identifier. Rather
than typing it, which is what you appeared to do, copy and paste the HTML
verbatim then modify it. Don't forget to include the DTD (<!DOCTYPE ...).

[snipped HTML]

Mike

[1] I always wondered why some people persisted in using INPUT elements
for button, submit and reset controls, rather than the more versatile
BUTTON element. Support for the NN4 generation of browsers must be the
reason.

--
Michael Winter
M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

Need Help with JavaScript code Please

re: Need Help with JavaScript code Please

re: Need Help with JavaScript code Please

re: Need Help with JavaScript code Please

re: Need Help with JavaScript code Please

re: Need Help with JavaScript code Please

/bytes/development

/bytes/it

/bytes/about