|
EXAMPLE
See it at work at the left side of this page.
1) Download
this ZIP file with the script files and the images, and unzip into the
desired directory.
2) Insert this code in the <HEAD> section of the page.
3) Insert the following HTML code in the <BODY> section
where you want the rollover buttons to appear in the page.
4) Insert the onLoad event handler inside the <BODY> tag:
<body onload="preloadImages('menu_script/corner_ll.gif'
and the rest of the statement below, followed by
standard tags such as bgcolor, etc..
5) Define the images and their path in this section of
the content.js script file:
if (document.images) {
var arrow = new Image();
var blank = new Image();
arrow.src = "menu_script/arrow.gif";
blank.src = "menu_script/blank.gif";
// The rollover images
var I1on = new Image();
I1on.src = "menu_script/button1_on.gif";
var I1off = new Image();
I1off.src = "menu_script/button1_off.gif";
var I2on = new Image();
I2on.src = "menu_script/button2_on.gif";
var I2off = new Image();
I2off.src = "menu_script/button2_off.gif";
and so forth
And here:
function define_table(tw) {
table_template_front_array1[0] = '<table width="' + tw + '" cellspacing="0" cellpadding="0" border="0" onmouseover="TableOver(\'';
table_template_front_array2[0] = '\');" onmouseout="TableOut();"><tr><td colspan="2" width="7">
<img src="menu_script/corner_ul.gif" width=7 height=8 border="0"></td>
<td width="' + (tw-7) + '" background="menu_script/line_top.gif">
etc..
6) Define the popup menus, the table width, the positioning and the content in
the
content.js file:
var table_width = 185; // Changes the
width of all menu tables. Set to widest menu.
var TimeLinkOut = 800; // Set time for
link highlight off.
var TimeLayerOut = 800; // Set time for layer off after mouse moves
away.
define_table(table_width);
var l = new Layer("L01", 0, 4, 0, 240, 262);
// Name, Left and Top position of the menu
l.ar(1, '<b><font class=MenuHead>PlanMagic Corporation</b></font>');
// the header, it can be removed
l.ar(0, '<a href="company.html" onmouseout="LinkOut(\'L01\');" onmouseover="LinkOver(\'L01-0\');"
class="MenuLink"><font face=Verdana>About us</font></a></td>');
l.ar(0, '<a href="products.html" onmouseout="LinkOut(\'L01\');" onmouseover="LinkOver(\'L01-0\');"
class="MenuLink"><font face=Verdana>Our products</font></a></td>');
l.fl();
// Example with submenu
var l = new Layer("L02", 0, 4, 0, 240, 286);
// Name, Left and Top position of the menu
l.ar(0, '<a href="business.html" onmouseout="LinkOut(\'L02\');" onmouseover="LinkOver(\'L02-1\');"
class="MenuLink"><font face=Verdana>PlanMagic Business</font></a> <img src="menu_script/arrow.gif" name="Link"></td>');
l.fl();
var l = new Layer("L02-1", 0,
5, 1, 244,
310); // Name, Left and Top position of the menu
l.ar(0, '<a href="business_planning.html" onmouseover="TableOver(\'L02-1\');"
class="MenuLink"><font face=Verdana>Features</font></a></td>');
l.fl();
Notice that on a submenu you change the 0, 4, 0
parameters to 0, 5, 1.
7) Define the popup menus and the links in this section of the
content.js file:
var numOfMenus = 4; // number of
the main popup menus
var numOfImages = 5; // number of rollover buttons
layersList = new Array("L01","L02","L02-1","L02-2","L02-3","L02-4","L03","L04");
// popup menus and submenus, 8 in this example
var layerCount = 8; // total number of popup menus
8) Define the rollover buttons in this section of the HTML code:
<a href="index.html" onclick="return true;" onmouseout="hideMenu('');"
onmouseover="showMenu('L01', 'I1');">
<img src="menu_script/button1_off.gif" border="0"
name="I1" width="120" height="24"></a><br>
<a href="products.html" onclick="return true;" onmouseout="hideMenu('');"
onmouseover="showMenu('L02', 'I2');">
<img src="menu_script/button2_off.gif" border="0"
name="I2" width="120" height="24"></a><br>
and so forth
9) Customize the style of headers and links in the menu.css:
.MenuHead {color: #000000;
font-family: Verdana, Helvetica, sans-serif;
font-size: 10pt}
.MenuLink {font-family: Verdana, Helvetica, sans-serif; color: #003366; text-decoration: none; cursor: none}
etc..
10) Change the menu background color in the function
define_table section of the content.js file.
Modify each of the 6 occurrences of bgcolor="FFFFCE"
to whichever color code you like. Then change the background
images to show the same color (bullet.gif, corner_ll.gif, corner_lr.gif,
corner_ul.gif, corner_ur.gif, line_bot.gif, and line_top.gif).
By changing the corner images you can choose to have squared or rounded
corners for the menus.
11) Define the path to the script files in the <HEAD>
section:
<link REL="styleSheet" HREF="menu_script/menu.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript1.2" SRC="menu_script/content.js"></SCRIPT>
<SCRIPT language="JavaScript1.1" src="menu_script/menu.js"></SCRIPT>
<SCRIPT LANGUAGE="javascript">
if (((navigator.appName == "Netscape") && (parseFloat(navigator.appVersion) < 4.0)) || ((navigator.appName == "Microsoft Internet Explorer") && (parseFloat(navigator.appVersion) < 4.0))) window.location =
"old_browser.html";
var old_nn4 = ((navigator.appName == "Netscape") && (parseFloat(navigator.appVersion) < 4.06));
if (!old_nn4) document.write('<LINK REL="stylesheet" HREF="menu_script/ns.css">');
</SCRIPT>
The old_browser.html is the redirect page for users with IE 4.0/NS 4.0 or
previous.
|
