Web Page Redirection Tutorial, Example

Web Page Redirection Tutorial

Example using an image as form submission button

Written by Kelly Yancey

This example illustrates using an image to submit the user's choice of Internet location to go to. Rather than a traditional submit button, a image is used which can be anything you like, in this case simply the word "Go" with an arrow. Using an image is often preferable since it allows you to customize the look of your navigational tools to match the layout of the rest of your web page. However, as can be demonstrated in this example, most web browsers do not change the mouse pointer to the usual hand when moved over the submit image, thereby not giving the usual visual indication that the user can click there. This can cause many new Internet users to become confused.

To help alleviate confusion in new users, JavaScript is used to enhance the drop-down list box so that the user does not need to ever click on the submit button or image as the case may be. Instead, as soon as they select the new Internet address to go to from the list presented, the new address is immediately loaded without any further user intervention. Together, you get a navigational tool which is visually appealing, reduces clutter on your web page by consolidating similar hyperlinks into one control, and is easy to use. The JavaScript needed for this effect is the same as was presented in the original example; the selection box is then created with HTML similar to the following:

<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="image" SRC="submit-button.gif" BORDER=0>
</FORM>

Even though the JavaScript fully automates the selection process thereby making either a submit button or image obsolete, you must include one for compatibility with older web browsers which do not support JavaScript. Even if you primary audience is JavaScript-capable browsers, it is prudent to have a submit image which matches the layout of the rest of your page so as to maintain visual consistency throughout the page while supporting all web browsers.

Return to Web Page Redirection Tutorial

Example

Simply select the page you would like to view from the drop-down list. If your web browser supports JavaScript, the selected page will immediately be loaded and displayed in your browser. However, if your browser does not support JavaScript, or if you have JavaScript disabled, the selected page will not be displayed until you click on the Go button.