webGFX Nav-O-Mat

Drop Down Menu 1 | Drop Down Menu 2 | Pull Down Menu (Popup) | Drop Down Generator | webGFX Nav-O-Mat

webGFX Nav-O-Mat

Description:

NAV-O-MAT is an online web based tool for designing a graphic navigation menu. This page explains how to implement such a tool.

How to use:

Part 1: Creating a NAV-O-MAT graphic navigation

1. Go to webGFX web site and click on the NAV-O-MAT option.

2. Select the style of navigation tool desired, then select the desired background color as well as the names you wish to appear on each button

3. When finished, click on the "Generate Navigation" icon

4. After graphic has been designed, click on option to download the graphic. File will be a zip file. Be sure to note the directory where the file is stored.

Part 2: Editing the provided files

1. Use your favorite utility to unzip the file into an empty directory. You should have several .jpg files, an index.html file, and a subdirectory "images" with several more .jpg files.

2. Open the "index.html" file using your favorite text editor, and remove the starting tags <HTML><HEAD></HEAD>, and the trailing </HEAD> tag. Note: do NOT delete either the <BODY> or the </BODY> tags, since they are using an ONLOAD option with the <BODY> tag.

3. There are 2 primary things to edit in the source code: (a) the navigation.html# strings and (b) every occurence of a name of a .jpg file. Edit as follows:

a. Look for all occurrences of href="navigation.html#". They should be all together, and there should be one for as many buttons you will have on your graphic menu. Replace each occurrence of "navigation.html#" with the URL of the page you wish to link to. For example: href="www.trellix.com"

b. For every graphic jpg file listed, we will need to add ^GEMDIR/ to the name of each file. In addition, for those .jpg files identified as being in the "images" directory, we will want to remove the images/ suffix.

c. Example:

change 'item8.jpg' to '^GEMDIR/item8.jpg'

and change <img src="images/nav5s_line10_1.jpg"

to <img src="^GEMDIR/nav5s_line10_1.jpg"

5. When finished, do a "SAVE AS" and save the file with a new name.

Part 3. Inserting into Trellix

1. Open up your Trellix file and go to your desired Trellix page

2. Insert a BYOWG

3. Copy & paste the code from Part 2 into the BYOWG

4. Before closing the BYOWG, click on 'Files for this gem, and add every .jpg file.

5. Click on 'Modify' then save and publish your Trellix file

Example:

webGFX

Download the code

right click on link, then click on 'Save target (or frame) as'

n/a

Other information:

For more information, go to the webGFX web site

Source code:

<body bgcolor="#ffffff" text="#FFFFFF" topmargin="0" leftmargin="0"

onLoad="MM_preloadImages('^GEMDIR/item7.jpg','#923654975843');

MM_preloadImages('^GEMDIR/item8.jpg','#923654989984');

MM_preloadImages('^GEMDIR/item9.jpg','#923654997046');

MM_preloadImages('^GEMDIR/item10.jpg','#923655003625');

MM_preloadImages('^GEMDIR/item11.jpg','#923655009312');

MM_preloadImages('^GEMDIR/item12.jpg','#923655015500');">

<title>webGFX</title>

<!--

function MM_preloadImages() { //v2.0

if (document.images) {

var imgFiles = MM_preloadImages.arguments;

if (document.preloadArray==null) document.preloadArray = new Array();

var i = document.preloadArray.length;

with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){

preloadArray[i] = new Image;

preloadArray[i++].src = imgFiles[j];

} }

}

function MM_swapImgRestore() { //v2.0

if (document.MM_swapImgData != null)

for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)

document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];

}

function MM_swapImage() { //v2.0

var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;

for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {

objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];

if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||

(objStr.indexOf('document.all[') ==0 && document.all ==null))

objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);

obj = eval(objStr);

if (obj != null) {

swapArray[j++] = obj;

swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];

obj.src = MM_swapImage.arguments[i+2];

} }

document.MM_swapImgData = swapArray; //used for restore

}

//-->

</script>

<tr>

</tr>

</table>

</body>