JavaScript Tip of the Week for September 2, 1996: Part Two of What's New in 3.0 | Source Code
for 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>


