Need Help with JavaScript code Please

**pcx99** · Jul 23 '05, 10:43 AM

Re: Need Help with JavaScript code Please

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...N eed 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>JavaScri pt Slide Show - PhotoAlbum</TITLE>
>
> <SCRIPT LANGUAGE="JavaS cript">
>
> var PhotoAlbum = new
> Array("bunny_la dy.gif","busine ss_lady.gif","r unning_lady.gif ","color_lady.g if")
> var PicIndex=1
> var pictures=PhotoA lbum.length
>
> function NextImage ( ) {
> if (PicIndex < pictures) {
> PicIndex++
> }
> document.ImgAlb um.src=PhotoAlb um[PicIndex-1]
> }
>
> function PreviousImage ( ) {
> if (PicIndex > 1) {
> PicIndex--
> }
> document.ImgAlb um.src=PhotoAlb um[PicIndex-1]
> }
>
> function home ( ) {
> document.ImgAlb um.src=PhotoAlb um[0]
> }
>
>
> </SCRIPT>
> </HEAD>
>
> <BODY BACKGROUND=BACK 02.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="JavaScrip t:home ( ) ">[First Image]</A>
> <A HREF="JavaScrip t:PreviousImage ( )">[Previous Image]</A>
> <A HREF="JavaScrip t:NextImage ( )">[Next Image]</A>
> </CENTER>
>
> </BODY>
> </HTML>[/color]

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

Then change all references of document.ImgAlb um.src to
document.getEle mentById("ImgAl bum").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.

**Randy Webb** · Jul 23 '05, 10:43 AM

Re: Need Help with JavaScript code Please

pcx99 wrote:
[color=blue]
> TrvlOrm wrote:
>[/color]
[color=blue][color=green]
>> <A HREF="JavaScrip t:home ( ) ">[First Image]</A>
>> <A HREF="JavaScrip t:PreviousImage ( )">[Previous Image]</A>
>> <A HREF="JavaScrip t: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.ImgAlb um.src to
> document.getEle mentById("ImgAl bum").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.javas cript FAQ - http://jibbering.com/faq/

**Michael Winter** · Jul 23 '05, 10:43 AM

Re: Need Help with JavaScript code Please

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

[snip]
[color=blue][color=green]
>> <HTML>
>> <HEAD>
>> <TITLE>JavaScri pt Slide Show - PhotoAlbum</TITLE>
>>
>> <SCRIPT LANGUAGE="JavaS cript">[/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>Slidesho w</title>


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

button {
margin: 0 2px;
}

div#imgContaine r {
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.g if",
"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="imgContaine r">
<img id="albumImg" alt="Photo" src="bunny_purs e.gif" width="400"
height="270">
</div>
<div id="navigation" >

<button type="button" onclick="prevIm g()">Previous</button>
<button type="button" onclick="showIm g(0)">Home</button>
<button type="button" onclick="nextIm g()">Next</button>
</div>
</body>
</html>
[color=blue]
> First your IMG tag change NAME= ImgAlbum to ID="ImageAlbum "
>
> Then change all references of document.ImgAlb um.src to
> document.getEle mentById("ImgAl bum").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@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

**TrvlOrm** · Jul 23 '05, 10:44 AM

Re: still doesn't work yet

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>Exerci se 8-3 JavaScript Slide Show - Discussion Forum
HELP</TITLE>

<STYLE TYPE="text/css">

BODY {
text=align: center;
}

Button {
margin: 0 2px;
}

div#imgContaine r {
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.g if",
"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 ="imageContaine r">

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

<div id="navigation" >

<button type="button" onclick="prevIm age()">Previous image</button>
<button type="button" onclick="showIm age()">Home</button>
<button type="button" onclick="nextIm age()">Next image</button>

</div>

</BODY>
</HTML>

**Michael Winter** · Jul 23 '05, 10:44 AM

Re: still doesn't work yet

On 5 May 2004 12:51:50 -0700, TrvlOrm <ksorman@shaw.c a> 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@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

Need Help with JavaScript code Please

Need Help with JavaScript code Please

Comment

Comment

Comment

Comment

Comment