HTML Goodies: Script Tip: Week 38

 

Tehp…

     I’m not sure how many different ways I’m going to be able to keep coming up with to misspell and make plays on the word “tip”.

      OK! We start a new tip. This tip is a basic drop down link menu. I remember very well when this form of creating links came out. Everyone wanted to know how to do it. Because of that, everyone tried at once and many different methods of getting a FORM-based drop down menu to act as links started floating around the Web. This is a very basic format. I think it’s a good one, but just keep in mind that this certainly isn’t the only way of getting the job done.

     As you’ll see, this link menu uses a button to trigger its effect. That can be eliminated and after we understand how this format works, we’ll alter the script a bit so that the button isn’t required. It’ll just make the link when the user chooses from the menu.

      This format works outside of frames. After the no-button version, we’ll alter again so it works within a frames format by loading its URLs into a separate frames window. Basically we’re going to beat this drop down menu to death.

      Here’s the first version of the Script and its effect:

---

–> Choose a Link Script Tip #1 Script Tip #2 Script Tip #3

---

<SCRIPT LANGUAGE=”javascript”>

function LinkUp()
{
var number = document.DropDown.DDlinks.selectedIndex;
location.href = document.DropDown.DDlinks.options[number].value;
}
</SCRIPT>

<FORM NAME=”DropDown”>
<SELECT NAME=”DDlinks”>
<OPTION SELECTED>–> Choose a Link <–
<OPTION VALUE=”scripttip1.html”> Page One
<OPTION VALUE=”scripttip2.html”> Page Two
<OPTION VALUE=”scripttip3.html”> Page Three
</SELECT>

<INPUT TYPE=”BUTTON” VALUE=”Click to Go!” onClick=”LinkUp()”>
</FORM>

---

     We’ll get underway by once again starting from the bottom up. Here’s the HTML that creates the drop down box and the button:

<FORM NAME=”DropDown”>
<SELECT NAME=”DDlinks”>
<OPTION SELECTED>–> Choose a Link <–
<OPTION VALUE=”scripttip1.html”> Page One
<OPTION VALUE=”scripttip2.html”> Page Two
<OPTION VALUE=”scripttip3.html”> Page Three
</SELECT>

<INPUT TYPE=”BUTTON” VALUE=”Click to Go!” onClick=”LinkUp()”>
</FORM>

     You should be quite familiar with the drop down link format by now. We start by setting a FORM and giving it a name. This form will be named DropDown. See that above?

     Next, we’ll set up the select box and give it a name. We’ll call this one DDlinks. Still with me?

     The first “option” is the one that will display so we will not give that a VALUE. It will display the text:
“–> Choose a link &lt–“.

     Next we start listing the options that will be used to create links. Each is given a VALUE that represents the link it will point towards. Now, I only have that page name because the files I’m linking to are in the same directory. If you want to set this to links outside of your site, just put the entire URL in for the VALUE. For instance:

<OPTION VALUE=”https://www.htmlgoodies.com/new.html”>

     I have three items to choose from. You can have fifty, or more, if you want. I’m just keeping it small for the example.

     The </SELECT> ends the drop down box.

     The button comes next.

<INPUT TYPE=”BUTTON” VALUE=”Click to Go!” onClick=”LinkUp()”>

     Its job is to trigger the function that will grab the VALUE and turn it into a link. See the
onClick=”LinkUp()”? That’s what will do it.

     Finally, an </FORM> wraps up the FORM elements of this script’s HTML side. Now that we know the players, we can go after the function.

Next Week: The Function

---

Learn to write your own JavaScripts with the