PageTutor.com

How to make multi-link jump boxes. v2.0
by Joe Barta - pagetutor.com

These little guys are actually pretty easy to make. First you'll need a few target documents.

Save this as here.html... 

<HTML>
<HEAD>
<TITLE>Put your title here</TITLE>
</HEAD>
<BODY BGCOLOR="#66CC99">
<H1 ALIGN=center>Here</H1>
</BODY>
</HTML>

Save this as there.html... 

<HTML>
<HEAD>
<TITLE>Put your title there</TITLE>
</HEAD>
<BODY BGCOLOR="#99CCFF">
<H1 ALIGN=center>There</H1>
</BODY>
</HTML>

And this as anywhere.html... 

<HTML>
<HEAD>
<TITLE>Put your title anywhere</TITLE>
</HEAD>
<BODY BGCOLOR="#FFCC99">
<H1 ALIGN=center>Anywhere</H1>
</BODY>
</HTML>

Next we'll work on the jump box. Save this as sample1.html... 

<HTML>
<HEAD>
<TITLE>Jump Box</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Now build the drop down list. Start with a couple form tags... 

<HTML>
<HEAD>
<TITLE>Jump Box</TITLE>
</HEAD>
<BODY>

<FORM NAME="myform">
</FORM>

</BODY>
</HTML>

Add a drop down list...

<HTML>
<HEAD>
<TITLE>Jump Box</TITLE>
</HEAD>
<BODY>

<FORM NAME="myform">
<SELECT NAME="mylist">
<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.

Now add the button... 

<HTML>
<HEAD>
<TITLE>Jump Box</TITLE>
</HEAD>
<BODY>

<FORM NAME="myform">
<SELECT NAME="mylist">
<OPTION VALUE="here.html" >Here
<OPTION VALUE="there.html">There
<OPTION VALUE="anywhere.html">Anywhere
</SELECT>
<INPUT TYPE="button" VALUE="Go" onClick="location.href = myform.mylist.options[myform.mylist.selectedIndex].value"> 
</FORM>

</BODY>
</HTML>

The value "Go" is what the button says. This can be anything you want. myform and mylist are the names of the form and the select list

Now because it's a navigation thing, and it relies on javascript, if someone comes by your site with that evil javascript turned off, he'll be sorta stuck. So, to accomodate him, we'll be nice and throw in some plain text links wrapped in NOSCRIPT tags. 

<HTML>
<HEAD>
<TITLE>Jump Box</TITLE>
</HEAD>
<BODY>

<FORM NAME="myform">
<SELECT NAME="mylist">
<OPTION VALUE="here.html" >Here
<OPTION VALUE="there.html">There
<OPTION VALUE="anywhere.html">Anywhere
</SELECT>
<INPUT TYPE="button" VALUE="Go" onClick="location.href = myform.mylist.options[myform.mylist.selectedIndex].value">
<NOSCRIPT><BR>
<A HREF="here.html">Here</A> | 
<A HREF="there.html">There</A> | 
<A HREF="anywhere.html">Anywhere</A>
</NOSCRIPT>
</FORM>

</BODY>
</HTML>

There. All done. Piece of cake! View it here.

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 button code like so... 

onClick="parent.bottomframe.location.href = myform.mylist.options[myform.mylist.selectedIndex].value

bottomframe being the name of the target frame.

And that's that for that!