/    Sign up×
Community /Pin to ProfileBookmark

Using JS on Images for pagination

?

Hello Everyone,

Unfortunately I fall into the category that most Newbies to JavaScript do…I don’t know much of a thing about how it works. I am hoping that some of you can help me understand how to make what I need to work, here’s what I’m trying to do:

I’m designing a “web-site” which in actuality is going to be burned on a CD-ROM for distribution. On the index page I have an area which is an iframe – this is what is obviously going to hold my content of the site. On the bottom of the page I have 2 rollover buttons – back and next. I tried following a tutorial (see bottom for hyperlink) which uses a JS file with a variable declared for the pages using array to designate each page a number in sequential order. Since I am not familiar with JS I need some assistance. I need to have each page appear inside the iframe, and not replace the entire index. If anyone can help this “Newbie” understand how the code should look, it would be greatly appreciated. Below is my js file data so you can see what I have written:

[CODE]// JavaScript Document

var MyLocation=frame[‘content’].location.href=”intro.html”;

var MyPage=new Array;

{

MyPage[0]=”intro.html”;

MyPage[1]=”systhk_toc.html”;

MyPage[2]=”systhk_01.html”;

MyPage[3]=”systhk_02.html”;

MyPage[4]=”systhk_03.html”;

MyPage[5]=”systhk_04.html”;

MyPage[6]=”systhk_05.html”;

MyPage[7]=”systhk_06.html”;

MyPage[8]=”systhk_07.html”;

MyPage[9]=”systhk_08.html”;

MyPage[10]=”systhk_09.html”;

MyPage[11]=”systhk_10.html”;

MyPage[12]=”systhk_11.html”;

MyPage[13]=”systhk_12.html”;

MyPage[14]=”systhk_13.html”;

MyPage[15]=”systhk_14.html”;

MyPage[16]=”systhk_15.html”;

MyPage[17]=”systhk_16.html”;

MyPage[18]=”basics_toc.html”;

MyPage[19]=”basics_01.html”;

MyPage[20]=”basics_02.html”;

MyPage[21]=”basics_03.html”;

MyPage[22]=”basics_04.html”;

MyPage[23]=”basics_05.html”;

MyPage[24]=”basics_06.html”;

MyPage[25]=”basics_07.html”;

MyPage[26]=”basics_08.html”;

MyPage[27]=”basics_09.html”;

MyPage[28]=”team_toc.html”;

MyPage[29]=”team_01.html”;

MyPage[30]=”team_02.html”;

MyPage[31]=”team_03.html”;

MyPage[32]=”team_04.html”;

MyPage[33]=”team_05.html”;

MyPage[34]=”team_06.html”;

MyPage[35]=”team_07.html”;

MyPage[36]=”team_08.html”;

MyPage[37]=”team_09.html”;

MyPage[38]=”team_10.html”;

MyPage[39]=”team_11.html”;

MyPage[40]=”team_12.html”;

MyPage[41]=”analysis_toc.html”;

MyPage[42]=”analysis_01.html”;

MyPage[43]=”analysis_02.html”;

MyPage[44]=”analysis_03.html”;

MyPage[43]=”analysis_04.html”;

MyPage[44]=”analysis_05.html”;

MyPage[45]=”analysis_06.html”;

MyPage[46]=”analysis_07.html”;

MyPage[47]=”analysis_08.html”;

MyPage[48]=”analysis_09.html”;

MyPage[49]=”analysis_10.html”;

MyPage[50]=”analysis_11.html”;

MyPage[51]=”analysis_12.html”;

MyPage[52]=”analysis_13.html”;

MyPage[53]=”analysis_14.html”;

MyPage[54]=”analysis_15.html”;

MyPage[55]=”analysis_16.html”;

MyPage[56]=”analysis_17.html”;

MyPage[57]=”analysis_18.html”;

MyPage[58]=”analysis_19.html”;

MyPage[59]=”analysis_20.html”;

MyPage[60]=”analysis_21.html”;

MyPage[61]=”analysis_22.html”;

MyPage[62]=”analysis_23.html”;

MyPage[63]=”analysis_24.html”;

MyPage[64]=”analysis_25.html”;

MyPage[65]=”analysis_26.html”;

MyPage[66]=”analysis_27.html”;

MyPage[67]=”analysis_28.html”;

MyPage[68]=”analysis_29.html”;

MyPage[69]=”analysis_30.html”;

MyPage[70]=”aca_toc.html”;

MyPage[71]=”aca_01.html”;

MyPage[72]=”aca_02.html”;

MyPage[73]=”aca_03.html”;

MyPage[74]=”aca_04.html”;

MyPage[75]=”aca_05.html”;

MyPage[76]=”aca_07.html”;

MyPage[77]=”aca_08.html”;

MyPage[78]=”aca_09.html”;

MyPage[79]=”aca_10.html”;

MyPage[80]=”aca_11.html”;

MyPage[81]=”aca_12.html”;

MyPage[82]=”aca_13.html”;

MyPage[83]=”aca_14.html”;

MyPage[84]=”aca_15.html”;

MyPage[85]=”aca_16.html”;

MyPage[86]=”aca_17.html”;

MyPage[87]=”aca_18.html”;

MyPage[88]=”aca_19.html”;

MyPage[89]=”aca_20.html”;

MyPage[90]=”aca_21.html”;

MyPage[91]=”aca_22.html”;

MyPage[92]=”mngchange_toc.html”;

MyPage[93]=”mngchange_01.html”;

MyPage[94]=”mngchange_02.html”;

MyPage[95]=”mngchange_03.html”;

MyPage[96]=”mngchange_04.html”;

MyPage[97]=”mngchange_05.html”;

MyPage[98]=”mngchange_06.html”;

MyPage[99]=”mngchange_07.html”;

MyPage[100]=”mngchange_08.html”;

MyPage[101]=”mngchange_09.html”;

MyPage[102]=”mngchange_10.html”;}

function GoBack() {

if (ThisPageNumber <=0) {

alert(“You are at the beginning of this course”);

}

else{ ThisPageNumber=ThisPageNumber-1;

frame.[‘content’]=MyPage[ThisPageNumber];

} }

function GoForward(){

ThisPageNumber=ThisPageNumber+1;

if (ThisPageNumber >=MyPage.length) {

answer=confirm(“You are at the end of the present series. “+

“Press ok to go to the beginning. Cancel to stay here”);

if (answer!=0) {

ThisPageNumber=0; window.location=MyPage[ThisPageNumber]; } ThisPageNumber=ThisPageNumber-1;

}

else {

frame.[‘content’]=MyPage[ThisPageNumber];

}

}
[/CODE]

According to the tutorial [URL=”http://www.trans4mind.com/personal_development/JavaScript/BackForward.htm”]Back and Forward Buttons[/URL] I need to use the js file as a source for the buttons to work. In Dreamweaver 8 I put the necessary <script language=”JavaScript” src=”backnext.js”> up in the head section before the body, I tried putting the javascript:goForward(), javascript:goBack() as the link for the images, I have tried using it as the src for them, I have tried using the behaviors panel to attach the action. Nothing has worked. Anything you gurus who know more than I do can tell me or replace wit the coorect with a explanation is always welcome.

Thanks!
Metallifan15 ?

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@RobDavidApr 12.2007 — window.frames['content'].location = MyPage[ThisPageNumber];

not

frame['content'] = MyPage[ThisPageNumber];

or

window.location=MyPage[ThisPageNumber];
Copy linkTweet thisAlerts:
@metallifan15authorApr 16.2007 — Thanks Rob for that clarification.

For some reason the JS code isn't doing anything when I test the pages. Any knowledge on how to properly link the JS file and my buttons so that when the user clicks the button it does what it needs to (either goes back one page or up one page).

Is the coding case sensitive? like with the goback(), goforward()?? It should match what is writtem into the JS file, right? ?
×

Success!

Help @metallifan15 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...