Need Help with JavaScript code Please

TrvlOrm

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

Subscribe Post Reply

2031

pcx99

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

Randy Webb

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

Michael Winter

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>


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

TrvlOrm

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

Michael Winter

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

Similar topics

Need help with this script please..

by: Johnny Knoxville | last post by:

I've added a favicon to my site (http://lazyape.filetap.com/) which works fine if you add the site to favourites the normal way, but I have some JavaScript code on a couple of pages with a link,...

Javascript

Let-click send to need right?

by: George Hester | last post by:

In a page I have when the user left-clicks the page a Input box for a form gets the focus. But if the user right-clicks the page the Input box is not getting the focus. I'd like the Input box to...

Javascript

I need to calculate the total using javascript where i use 3 seperate list boxes

by: bin_P19 P | last post by:

the code i have got is as follows and now im stuck <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Shopping...

Javascript

Help Please with Button Actions - JavaScript

by: TrvlOrm | last post by:

Can any one please help me...I am new to JavaScript and I have been struggling with this code for days now and can't figure it out. I would like to get the Buttons to correspond with the action...

Javascript

Need some quick help with a function

by: Adrienne | last post by:

I am the first to admit that I know bupkis about javascript, except that sometimes I need it to do something client side that I can't do server side. Anyway, here's my problem: <input...

Javascript

Simple Regular Expression need

by: Q. John Chen | last post by:

I have Vidation Controls First One: Simple exluce certain special characters: say no a or b or c in the string: * Second One: I required date be entered in "MM/DD/YYYY" format: //+4 How...

ASP.NET

Do you need JavaScript in ASP.NET?

by: the_grove_man | last post by:

I purchased a book titled "Pro ASP.NET 2.0" to get up to speed on web stuff because I ususally do Windows Form Applications.. But in the first chapters I was reading this week it brought to mind...

C# / C Sharp

Facing problems with $_POST. Data can not be processed by PHP...

by: sufian | last post by:

I am new to the world of PHP. Below is my simple PHP file "invite.php" with a form having an image send button (I have to use the image send button because it is the requirement, may be this is...

PHP

Problem in Event Handling

by: sorobor | last post by:

dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

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

General

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

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General