| How to make multi-link jump boxes. by Joe Barta PROFESSIONAL WEB DESIGN These little guys are actually pretty easy to make. First you'll need a few target documents. Save this as `here.html` (Windows 3.x users save it as `here.htm`)... `<HTML> <HEAD> <TITLE>Put your title here</TITLE> </HEAD> <BODY BGCOLOR="#66CC99"> <P> <H1 ALIGN=center>Here</H1> </BODY> </HTML>` Save this as `there.html`... `<HTML> <HEAD> <TITLE>Put your title there</TITLE> </HEAD> <BODY BGCOLOR="#99CCFF"> <P> <H1 ALIGN=center>There</H1> </BODY> </HTML>` And this as `anywhere.html`... `<HTML> <HEAD> <TITLE>Put your title anywhere</TITLE> </HEAD> <BODY BGCOLOR="#FFCC99"> <P> <H1 ALIGN=center>Anywhere</H1> </BODY> </HTML>` Next we'll work on the jump box. Save this as `index.html`... `<HTML> <HEAD> <TITLE>Jump Box</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>` Add the function to the `<HEAD>` tag. `<HTML> <HEAD> <TITLE>Jump Box</TITLE>` <SCRIPT LANGUAGE="JavaScript"> <!--- Hide from tired old browsers function jumpBox(list) {location.href = list.options[list.selectedIndex].value} // end hiding ---> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML> Now build the jump box. Start with a couple form tags... `<HTML> <HEAD> <TITLE>Jump Box</TITLE>` <SCRIPT LANGUAGE="JavaScript"> <!--- Hide from tired old browsers function jumpBox(list) {location.href = list.options[list.selectedIndex].value} // end hiding ---> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <FORM> </FORM> </BODY> </HTML> Add a drop down list... `<HTML> <HEAD> <TITLE>Jump Box</TITLE>` <SCRIPT LANGUAGE="JavaScript"> <!--- Hide from tired old browsers function jumpBox(list) {location.href = list.options[list.selectedIndex].value} // end hiding ---> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <FORM> <SELECT> <OPTION VALUE="here.html">Here <OPTION VALUE="there.html">There <OPTION VALUE="anywhere.html">Anywhere </SELECT> </FORM> </BODY> </HTML> Here, There & Anywhere are just labels, that is, they just specify what the drop box says. `here.html`, `there.html` & `anywhere.html` are the values. That is what gets passed to the function. Lastly, add the button... `<HTML> <HEAD> <TITLE>Jump Box</TITLE>` <SCRIPT LANGUAGE="JavaScript"> <!--- Hide from tired old browsers function jumpBox(list) {location.href = list.options[list.selectedIndex].value} // end hiding ---> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <FORM> <SELECT> <OPTION VALUE="here.html">Here <OPTION VALUE="there.html">There <OPTION VALUE="anywhere.html">Anywhere </SELECT> <INPUT TYPE="button" VALUE="Go" onClick="jumpBox(this.form.elements[0])"> </FORM> </BODY> </HTML> The value "Go" is what the button says. This can be anything you want. Wasn't that a piece of cake! There's one more thing we can do with this. What if you wanted this to work within frames?? That is, a jump box in one frame altering the contents of another. Well, that's pretty easy too. Here's an example. All you do is add to the function like so... `<SCRIPT LANGUAGE="JavaScript"> <!--- Hide from tired old browsers function jumpBox(list) {parent.main_frame.location.href = list.options[list.selectedIndex].value} // end hiding ---> </SCRIPT>` `main_frame` being the name of the target frame. And that's that for that! PROFESSIONAL WEB DESIGN