JavaScript Tip of the Week for September 2, 1996: Part Two of What's New in 3.0 | Source Code | WebReference

JavaScript Tip of the Week for September 2, 1996: Part Two of What's New in 3.0 | Source Code

JavaScript Tip of the Weekfor September 2, 1996: Source Code: Part Two of What's New in 3.0

Modifiable Select Menus
The Image Object
Detecting Plugins Improved!



Put this code in the head of the page for the Modifiable Select Menus:
/* This code is Copyright (c) 1996 Nick Heinle and Athenia Associates, 
 * all rights reserved. In order to receive the right to license this 
 * code for use on your site the original code must be copied from the
 * Web site webreference.com/javascript/. License is granted to user to 
 * reuse this code on their own Web site if and only if this entire copyright
 * notice is included. Code written by Nick Heinle of webreference.com.
 */
var maxLength = 10;
siteopt = new Array;
siteopt[0] = "Browse Past Tips";
siteopt[1] = "This Week";
siteopt[2] = "E-Mail";
siteopt[3] = "JavaScript Powered Tour";
siteopt[4] = "Tippettes";
var trueLength = siteopt.length;
var lst = siteopt.length;
url = new Array;
url[0] = "../tip_week_past.html";
url[1] = "../this_week/index.html";
url[2] = "../e-mail.html";
url[3] = "../960617/index.html";
url[4] = "../tippettes.html";
catopt = new Array;
catopt[0] = "Tip Related";
catopt[1] = "Site Features";
catopt[2] = "JavaScript Sites";
catopt[3] = "Favorite Tips";
function changePage() 
{
menuNum = document.SelectMenu.SelectPrimary.selectedIndex;
        if (menuNum == null){alert("Please select a category from the menu.");return;}
        else
        {
        i = document.SelectMenu.SelectSecondary.selectedIndex;
        window.location.href = url[i];
        }
}
function changeMenu()
{
siteopt.length = 0;
menuNum = document.SelectMenu.SelectPrimary.selectedIndex;
        if (menuNum == null) return;
  
        if (menuNum == 0) 
        {
        siteopt = new Array;
        siteopt[0] = new Option("Browse Past Tips");
        siteopt[1] = new Option("This Week");
        siteopt[2] = new Option("E-Mail");
        siteopt[3] = new Option("JavaScript Powered Tour");
        siteopt[4] = new Option("Tippettes");
        url = new Array;
        url[0] = "../tip_week_past.html";
        url[1] = "../this_week/index.html";
        url[2] = "../e-mail.html";
        url[3] = "../960617/index.html";
        url[4] = "../tippettes.html";
        }
        if (menuNum == 1) 
        {
        siteopt = new Array;
        siteopt[0] = new Option("Technology Showcase!");
        siteopt[1] = new Option("JavaScript and ActiveX.");
        siteopt[2] = new Option("The Beginner's Guide");
        url = new Array;
        url[0] = "../thehut/index.html";
        url[1] = "../activex/index.html";
        url[2] = "../guide/index.html";
        }
        if (menuNum == 2) 
        {
        siteopt = new Array;
        siteopt[0] = new Option("Netscape Handbook");
        siteopt[1] = new Option("JavaScript Index");
        siteopt[2] = new Option("Live Software");
        url = new Array;
        url[0] = "http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html";
        url[1] = "http://www.c2.org/~andreww/javascript/";
        url[2] = "http://jrc.livesoftware.com";
        }
        if (menuNum == 3) 
        {
        siteopt = new Array;
        siteopt[0] = new Option("The Sound of Music");
        siteopt[1] = new Option("Too Many Browsers? Not.");
        siteopt[2] = new Option("Spiff up the Old Page");
        url = new Array;
        url[0] = "../960826/sound_music.html";
        url[1] = "../960624/index.html";
        url[2] = "../960513/index.html";
        }
tot = siteopt.length;
        for (i = lst; i > 0; i--) 
        { document.SelectMenu.SelectSecondary.options[i] = null; }
        for (i = 0; i 
Put this code where you want the select menus displayed:
with (document) {
writeln('<TABLE BORDER = 0 BGCOLOR = "#F8D85A" CELLPADDING = 3 CELLSPACING = 0>');
writeln('<TR><TD COLSPAN = 3><FORM NAME = "SelectMenu">');
writeln('<FONT SIZE = 4 FACE = "Times">');
writeln('Modifiable Select Menu II</FONT>');
writeln('</TD></TR><TR><TD ALIGN = LEFT>');
writeln('<FONT SIZE = 2 FACE = "Times" >Category Menu</FONT><BR>');
writeln('<SELECT NAME="SelectPrimary" onChange="changeMenu(this.form)">');
tot = catopt.length; 
    for (i = 0; i < tot; i++)
    writeln("<OPTION>" +catopt[i]);
writeln("</SELECT>");
writeln('</TD><TD>');
writeln('<FONT SIZE = 2 FACE = "Times" >Site Menu</FONT><BR>');
writeln('<SELECT NAME="SelectSecondary">');
    for (i = 0; i < maxLength; i++)
    writeln("<OPTION>" +siteopt[i]);
    writeln("</SELECT>");
    for (i = maxLength; i > trueLength; i--) 
    { SelectMenu.SelectSecondary.options[i] = null; }
writeln('</TD><TD VALIGN = BOTTOM><A HREF = "javascript:changePage();">');
writeln('<IMG BORDER = 0 HEIGHT = 27 WIDTH = 70 SRC = "../jump1.gif"></A>');
writeln('</TD></TR>');
changeMenu();
writeln('</FORM>');
writeln('</TABLE>');
}



The image preloading code:
        reappear = new Image(100, 75);
        reappear.src = "golden_cup.gif";
        fade = new Image(100, 75);
        fade.src = "fade.gif";
The onMouseOver image changing code:
<A HREF = "javascript:nothing()" 
   onMouseOver = "golden_cup.src = fade.src"
   onMouseOut = "golden_cup.src = reappear.src">
<IMG NAME = "golden_cup" HEIGHT = 100 WIDTH = 75 BORDER = 0 SRC = "golden_cup.gif"></A>