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