Source Box #3
Mainpage.htm
<HTML>
<HEAD>
<TITLE> Menu in a Frame</TITLE>
</HEAD>
<FRAMESET ROWS=45,*>
<FRAME NAME="menu" SRC="menu.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=NO NORESIZE>
<FRAME NAME="main" SRC="instruct.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=AUTO>
</FRAMESET>
</HTML>
Home.htm
<HTML>
<HEAD>
<TITLE>Home Page</TITLE>
</HEAD>
<BODY>
This is the home page.<p>
<A HREF="mainpage.htm">Click here</A> to load the JavaScript Frames example
</BODY>
</HTML>
Menu.htm
<HTML>
<HEAD>
<TITLE>More complex menu</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
//set up a variable for number of buttons (max
var buttonCount = 5;
//create two arrays one for the on buttons
//and one for the off buttons
buttonOn = new Array(buttonCount);
buttonOff = new Array(buttonCount);
//fill the array with the on and off button images
//the images must be called img0on.jpg and img0off.jpg
//and so on. Provision is made for images 0-9
for (i = 0; i < buttonCount; i++) {
buttonOn[i]= new Image();
imageName = 'img' + i + 'on.jpg';
buttonOn[i].src = imageName;
buttonOff[i] = new Image();
imageName = 'img' + i + 'off.jpg';
buttonOff[i].src = imageName;
}
//turn the selected button on
function buttonSelect(buttonName,buttonState) {
if( buttonState == 'on')
document.images[buttonName].src = buttonOff[buttonName.charAt(3)].src;
else
document.images[buttonName].src = buttonOn[buttonName.charAt(3)].src;
}
//function to load new page into main frame
function loadMainFrame(pageToLoad) {
parent.main.location.href=pageToLoad;
}
//function to exit frames and return to full screen
function exitFrames() {
parent.location.href="home.htm"
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><A HREF="#" onClick="exitFrames()"
onMouseOver="buttonSelect('img0','off')"
onMouseOut="buttonSelect('img0','on')">
<IMG SRC="img0off.jpg" NAME= "img0" BORDER = 0
HEIGHT="26" WIDTH="66" ALT="Home Page"></A></TD>
<TD><A HREF="#" onClick="loadMainFrame('back.htm')"
onMouseOver="buttonSelect('img1','off')"
onMouseOut="buttonSelect('img1','on')">
<IMG SRC="img1off.jpg" NAME = "img1" BORDER=0
HEIGHT="26" WIDTH="88" ALT="Go Back"></A></TD>
<TD><A HREF="#" onClick="loadMainFrame('next.htm')"
onMouseOver="buttonSelect('img2','off')"
onMouseOut="buttonSelect('img2','on')">
<IMG SRC="img2off.jpg" NAME = "img2" BORDER=0
HEIGHT="26" WIDTH="92" ALT="Next Page"></A></TD>
<TD><A HREF="#" onClick="loadMainFrame('photos.htm')"
onMouseOver="buttonSelect('img3','off')"
onMouseOut="buttonSelect('img3','on')">
<IMG SRC="img3off.jpg" NAME="img3" BORDER=0
HEIGHT="26" WIDTH="84" ALT="Photos page"></A></TD>
<TD><A HREF="#" onClick="loadMainFrame('contact.htm')"
onMouseOver="buttonSelect('img4','off')"
onMouseOut="buttonSelect('img4','on')">
<IMG SRC="img4off.jpg" NAME = "img4" BORDER =0
HEIGHT="26" WIDTH="133" ALT="Contact details"></A></TD>
</TR>
</TABLE>
</BODY>
</HTML>