If you have ever visited Netscape, Microsoft, or IBM's home page, chances are that you have seen one -- a little drop-down list box with a list of international versions of their web site. You select a language from the list, press a button, and the web browser loads a new page written in the selected language. While you may not be ready to start drafting international versions of your web site just yet, you can use the same technique anytime you need to display a large number of hyperlinks in a small amount of space. For example, a list of customer's web sites, an index of documents available at your web site, or a list of the e-mail addresses for employees at your company.

What we want is a drop-down list box on the web page which, when the user selects an item from the list, redirects their web browser to a new Internet address. The simplest way to achieve this is to use a CGI program as the "action" of a HTML form as shown here:

<FORM ACTION="http://www.posi.net/cgi-bin/redirect">
<SELECT NAME="url">
  <OPTION VALUE=""> Web Page Redirection Tutorial
  <OPTION VALUE="http://www.yahoo.com"> Yahoo!
  <OPTION VALUE="http://www.lycos.com"> Lycos
</SELECT>
<INPUT TYPE="submit" VALUE=" Go ">
</FORM>

The CGI used is based on a simple PERL program written by Carlos A. Pero, distributed along with NCSA httpd, with a few modifications by myself. If you would like a copy of the script for your web site, you can download it here. The CGI requires the name of the select field to be "url" as shown. Also, each option in the drop-down list is required to have a value, even if blank, this value is the Internet address that the user's web browser will be directed to should they select that item.

As shown in the example HTML code above, the Internet address to direct the user to is given as the value of each list option and the name to display follows the option tag. If the Internet address is left blank, then nothing happens when the user selects that item thereby leaving them on the current page. As shown, the first item in the example list box would be named "Web Page Redirection Tutorial" and wouldn't do anything if the user selected it -- leaving them on the current page. The second item in the example would be named "Yahoo!" and would take the user to http://www.yahoo.com when that item was selected.

Every web browser supports this method, but it can still be improved. By carefully integrating JavaScript with the method shown above, we can make the technique even easier to use for people using a JavaScript-compatible web browsers such as Netscape Navigator or Microsoft Internet Explorer, but still have it behave exactly as described above on other browsers. Instead of requiring the user to click a button in order to go to the page they selected from the list, using JavaScript we can eliminate the need to click on the button and instead immediately load the new Internet address as soon as the user selects it. Everything discussed after this point is an optional improvement to the method already presented. It would seem to be quite a bit of extra work to add the ability to immediately direct the browser to the new page without waiting for the use to press some sort of "go" button, but it is a nice little feature that you many want to consider for aethetic reasons, and it does have a slight practical advantage.

All the examples in this tutorial use standard form submit buttons in their demonstrations, but an image can also be used. However, as shown in this example, when an image is used, many web browsers unfortunatly do not give any indication that the image can be clicked on. Therefore, if you prefer to use an image in place of the standard form submit button, many new Internet users can become confused as to what they are supposed to do since the browser is not making the usual indication to let them know that they can click on the image. For this reason, it is useful not to require the user to click on a submit button or image. You still need to have a submit button or image for users with web browsers that do not support JavaScript, but with the vast majority of Internet users now having JavaScript-capable browsers you can make you site both aesthetically pleasing and simple to navigate.

The first thing to do is to include the following HTML code in the HEAD section of your web page; this is the bit of JavaScript that is actually the workhorse for JavaScript-capable web browsers. Web browsers which do not understand JavaScript will simply ignore this code:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function switchpage(select) {
// JavaScript function for switching to web page when user
// selects option from the given list box.
// Copyright Kelly Yancey, 1997, 1998.
  var index;

  for(index=0; index<select.options.length; index++)
    if(select.options[index].selected)
      {
        if(select.options[index].value!="")
          window.location.href=select.options[index].value;
        break;
      }
}
// -->
</SCRIPT>

Then, to create the drop-down list box on your page which takes advantage of the JavaScript enhancement, include this HTML code in the body of your web page. Again, this is nearly identical to the first method shown in this tutorial, but is enhanced to take advantage of JavaScript if it is available in the user's web browser.

<FORM ACTION="http://www.posi.net/cgi-bin/redirect">
<SELECT NAME="url" onchange="switchpage(this)">
  <OPTION VALUE=""> Web Page Redirection Tutorial
  <OPTION VALUE="http://www.yahoo.com"> Yahoo!
  <OPTION VALUE="http://www.lycos.com"> Lycos
</SELECT>
<INPUT TYPE="submit" VALUE=" Go ">
</FORM>

Finally, this creates a drop-down list box that behaves like the example list box shown on this page. If the user's web browser supports JavaScript, then as soon as they select an item from the list box a new page is immediately loaded. If the user's web browser does not support JavaScript or if they have JavaScript disabled, they select an item from the list and have to press the submit button, then the new Internet address is loaded. So, if the user's web browser does not have JavaScript, they have to press the submit button just like they have to for every other drop-down list selection. If the user's web browser does support JavaScript, then the process is a little more automated so that it is fool-proof. In either event, you have presented the user with a list of hyperlinks in a manner that is compact, attractive, and easy to use.