By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,263 Members | 2,640 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,263 IT Pros & Developers. It's quick & easy.

Need Help with JavaScript code Please

P: n/a
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>
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
TrvlOrm wrote:
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>

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.

Jul 23 '05 #2

P: n/a
pcx99 wrote:
TrvlOrm wrote:
<A HREF="javascript:home ( ) ">[First Image]</A>
<A HREF="javascript:PreviousImage ( )">[Previous Image]</A>
<A HREF="javascript:NextImage ( )">[Next Image]</A>
</CENTER>

</BODY>
</HTML>

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


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.


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/
Jul 23 '05 #3

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

[snip]
<HTML>
<HEAD>
<TITLE>JavaScript Slide Show - PhotoAlbum</TITLE>

<SCRIPT LANGUAGE="JavaScript">

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>

<!-- The days of presentational mark-up are over. Use style sheets. -->
<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>
<!-- If you don't like the size of the text, don't change the heading
types,
change the text size. It's bad form to skip heading levels just for
aesthetic reasons -->
<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">
<!-- If you do want to use text instead of buttons, don't use the
JavaScript URI scheme (javascript:).
See <URL:http://jibbering.com/faq/#FAQ4_24> -->
<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>
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.


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.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #4

P: n/a
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>
Jul 23 '05 #5

P: n/a
On 5 May 2004 12:51:50 -0700, TrvlOrm <ks*****@shaw.ca> wrote:
Mike, your code doesn't seem to work.
I can assure you it does. If you changed the BUTTONs to INPUTs of type
button, it would even work on NN4[1].
I have imputted it in exactly as you have, [...]


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.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.