There are two types of images that make up the Joust menu. There are 13 outline icons consisting or plus/minus images, lines, joins and blank spaces. In addition, you can define any number of document icons which you will later assign to individual menu entries. The initOutlineIcons function in index.htm is where you set up your images.
As supplied, Joust provides a Macintosh Finder style outline on a Macintosh, an OS/2 style outline on an OS/2 PC and a Windows Explorer style outline on all other clients (if someone can tell us what it should look like on other GUI's we will add support). The idea is to conform to a look and feel that the user is already familiar with.
The first part of initOutlineIcons looks like this:
var ip = 'images/menu/'; ip += (theBrowser.platform == 'Mac') ? 'mac/' : ((theBrowser.platform == 'OS/2') ? 'os2/' : 'win/')
This sets up a variable called ip with the path to the directory that contains the images. The path it uses depends on the platform property of the theBrowser object (which is initialised by Joust when the page first loads - possible values are 'Win', 'Mac', 'OS/2' and 'X11'). You should change the paths here to match the directory you use on your web site. If you want all browsers to see exactly the same images then delete the second line.
To see what the menu looks like for different users, select an option:
The next part of initOutlineIcons looks like this:
imgStore.add('iconPlusTop', ip + 'plustop.gif', 18, 16); imgStore.add('iconPlus', ip + 'plus.gif', 18, 16); imgStore.add('iconPlusBottom', ip + 'plusbottom.gif', 18, 16); imgStore.add('iconPlusOnly', ip + 'plusonly.gif', 18, 16); imgStore.add('iconMinusTop', ip + 'minustop.gif', 18, 16); imgStore.add('iconMinus', ip + 'minus.gif', 18, 16); imgStore.add('iconMinusBottom', ip + 'minusbottom.gif', 18, 16); imgStore.add('iconMinusOnly', ip + 'minusonly.gif', 18, 16); imgStore.add('iconLine', ip + 'line.gif', 18, 16); imgStore.add('iconBlank', ip + 'blank.gif', 18, 16); imgStore.add('iconJoinTop', ip + 'jointop.gif', 18, 16); imgStore.add('iconJoin', ip + 'join.gif', 18, 16); imgStore.add('iconJoinBottom', ip + 'joinbottom.gif', 18, 16);
This code is adding the images that are used to make up the expanding/collapsing part of the menu to the imgStore object. The imgStore.add function has 4 parameters:
imgStore.add(imgName, imgFile, width, height);
If you want to change the look of your outline, you can change the files used for your Outline icons. However, the icon names (i.e. the first parameter in the imgStore.add function) must be left as they are.
The final part of initOutlineIcons looks like this:
imgStore.add('Folder', ip + 'folderclosed.gif', 18, 16); var di = 'images/menu/'; if ((theBrowser.code == 'NS') || (theBrowser.code == 'MSIE')) { di += theBrowser.code.toLowerCase() + '_doc'; imgStore.add('Document', di + '.gif', 18, 16); imgStore.add('DocumentMouseOver', di + '_mo.gif', 18, 16); imgStore.add('DocumentSelected', di + '_sel.gif', 18, 16); } else { imgStore.add('Document', di + 'doc.gif', 18, 16); }
Line one, above, is adding the image 'folderclosed.gif' to the imgStore with the name 'Folder'. The image is being taken from the platform specific directory pointed to by the variable 'ip'.
Lines 3 to 5 are building the 'di' variable that will be used to add a document image. First, set it to images/menu. Then, if the browser code is 'NS' or 'MSIE', add the browser code. Finally, add _doc. If the browser is MSIE, this would produce images/menu/msie_doc.
Line 6 is adding the image pointed to by the variable 'di', with '.gif' added, to the imgStore with the name 'Document'. If the browser is MSIE, this would add the image images/menu/msie_doc.gif. Lines 7 and 8 add MouseOver and Selected versions of the image (see below for more details of this).
Finally, line 8 adds a default image to be used by all browsers that are not MSIE or Netscape.
If you want to keep it simple, and use the same image for 'Folder' and 'Document' regardless of the platform or browser, replace this code with something like this:
imgStore.add('Folder', 'images/menu/folderclosed.gif', 18, 16); imgStore.add('Document', 'images/menu/document.gif', 18, 16);
If you want to define more images to use as document icons then add as many imgStore.add calls as you need, giving each image a unique name. The section on Defining the Menus explains how to attach these images to a particular menu entry.
It is very common, these days, to have images on a web page that change when the mouse moves over them. Joust will support these 'MouseOver' images for any Document icon and for the expand/collapse icons (but not the lines, joins and blanks). Note: This will only work on browsers that support the image object (Netscape 3 up, MSIE 4 up).
To define a "MouseOver" version of an image, simply add it to the imgStore with a name that is the same as the original image name plus "MouseOver". For example, to add a "MouseOver" version of the "Document" icon:
imgStore.add('DocumentMouseOver', '/images/mouseover.gif', 18, 16);
It is also possible to display a different Document Icon for an "expanded" entry and for the "selected" entry (the 'selected' entry is the last one the user clicked on). To do this, add an image to the imgStore with a name that is the same as the original image name plus "Expanded" or "Selected" (or "ExpandedSelected"). For example, to add a "selected" version of the "Folder" icon:
imgStore.add('FolderSelected', ip + 'folderopen.gif', 18, 16);
Finally, if you define "Expanded" and/or "Selected" images and you want to use "MouseOver" images, you will need to define a MouseOver version of each one. Possible image combinations are:
Note 1: The modifier names are case sensitive and the order is important (e.g. "SelectedExpanded" is not allowed). Invalid names will be ignored.
Note 2: For image swapping to work properly on the Macintosh version of MSIE, you must full paths for your image files rather than relative ones.