Hi Jump

Last modified: 9 February 1998.

Page Contents Overview  Set up  Parameters  Twice on a Page  Example  Deployment  Possible Improvements 


Overview

Hi Jump is a navigation Java applet to put on each web page in your site or HTML CD-ROM. You can see Hi Jump running at the top right and bottom of this page.

Hi Jump provides a user with links to a 'home' page, and 'previous', 'next' and 'up' in the contents, as defined by a Hi HelpIndex index file. In addition, standard links may be provided, eg for email feedback or any other web pages.

When a user's mouse is poised over a link, the name of the page title is displayed in a "tip".

Links are shown as grayed out if they are not available, eg if there is no Next page in the index.

Hi Jump made be included twice on a page easily.

We understand that Microsoft Frontpage provides similar style navigation arrows. However Frontpage requires you to use a Microsoft server and will not work on a CD-ROM.
Hi Jump is browser independent and will work from CD-ROM.


Setting up Hi Jump

First, include the basic HTML necessary to call Hi Jump:
<APPLET code=Jump archive="hijump10.jar" width=252 height=45>
... other parameters ...
<APPLET>
Change the APPLET width and height as necessary to fit the size of your icon images. Include an APPLET CODEBASE=whatever attribute if necessary.

It is easy to set up the font and colours used by the title tips using the Font, FgColor and tipBgColor parameters.

Set the index parameter to the name of the Hi HelpIndex index file used to describe the order of the pages.

Next, set the me parameter to the file name of the page, eg intro.html. Do not include any directories. (Note that this is only strictly necessary for users who are running Internet Explorer 3. If they run IE4, N3 or N4 then the me parameter is not needed and so is not used.)

Note carefully that the index and Icons parameters are all URLs relative to the applet code base.

Now set up the linkN and Images parameters carefully. Hint: look at the source for this page; copy the proud.gif and sunken.gif images.

Link Parameters

You may have any number of linkN parameters, ie link1, link2, etc. Each linkN parameter can refer to home, up, previous, next or an absolute URL.

Usually you will have the first four links as Home, Up, Previous and Next, so simply set the first four link parameters as follows:

<PARAM NAME=link1 VALUE="h">
<PARAM NAME=link2 VALUE="p">
<PARAM NAME=link3 VALUE="l">
<PARAM NAME=link4 VALUE="r">
If you want to specify additional link parameters to refer to fixed pages (or email, ftp, etc) then you will need to specify more details as follows:

URL type
'h'Home
'p'Parent (Up in contents)
'l'Left (Previous in contents)
'r'Right (Next in contents)
'd' Jump to the URL, relative to the applet document base.
'c' Jump to the URL, relative to the applet code base.
'b' Jump to the URL, relative to the index's first base url.
URL The URL to jump to.
Title The title displayed in the tip.
NB Can have "\n" to force a line feed in the tip.
Target The target frame.

For example, to have a fixed email, glossary and company web site links, you could use:

<PARAM NAME=link5 VALUE="d,mailto:support:yourco.com,Support">
<PARAM NAME=link6 VALUE="c,glossary.html,Glossary">
<PARAM NAME=link7 VALUE="d,http://www.yourco.com/,Company Site,_top">

Images

The icon images must each match the links.

You must give the names of two images in the Icons parameter. The first 'proud' image has all the icons of the links in unpressed state, while the second 'sunken' image has all the icons of the links in pressed state,

Both the 'proud' and 'sunken' images are made up of equal sized icons for each of the links, arranged across the image. There must be an icon for each of the linkN parameters. The overall applet width must match the width of the images.

Hint 1: the 'sunken' icons must give the impression that a button has been pressed. Put 2 pixel wide black bars on the left and top sides of the icon, and 2 pixel wide grey bars on the right and bottom sides of the icon. The 'sunken' icon should be centred within these black and grey button sides, so displace the 'proud' icon left and up 2 pixels.

Hint 2: Give the icon images a blank space at the bottom. The title tips will then appear in this space and so will not obscure the button when they are pressed.

Here are links to the 'proud' and 'sunken' images for Hi Jump running on this page:
'proud'
'sunken'


Parameters

The following parameters determine how Hi Jump runs. Add the parameters between the <APPLET> and </APPLET> tags, as shown in the example below (or use your HTML editor). Remember that it is best to enclose the VALUE string in double quotes. Note that the case of the NAME does not matter.

For example, to make the tip foreground colour blue, add

<PARAM NAME=fgcolour VALUE="blue">
Parameter Type Description Default
BgColor
BgColour
RGB triplet or colour name The background colour white
FgColor
FgColour
RGB triplet or colour name The foreground colour of the tip text black
Font Font definition The font used in the tips Dialog 10pt
Icons String, String The URLs of the 'proud' and 'sunken' images, relative to the code base. none
Index String The index file URL, relative to the code base. none
link<N> C style string of up to four comma-separated strings. See above for full information
URL type: 'b', 'c', 'd', 'h', 'p', 'l' or 'r'
URL
Title
Target
none
Me String The name of this page.
NB Use just the filename: no directory information.
none
Slave String (Anything) to indicate that this instance of Hi Jump is a slave which picks up its information from the main instance. See twice on a page below. none
TipBgColor RGB triplet or colour name The background colour of the pop-up title tip boxes. #EFFFFF, ie light blue

Twice on a Page

You may want to have Hi Jump at the top and bottom of your web pages.

You can make one instance of Hi Jump the main one. This instance reads the index file. Other instances of Hi Jump are marked as being a 'slave'; they pick up all the parameters and index file settings from the main instance of Hi Jump.

Slave instances of Hi Jump simply need two parameters, Slave and Me, eg:

<PARAM NAME=slave VALUE="True">
<PARAM NAME=me VALUE="index.html">

Example

This is a full example, using all the parameters for file index.html.
Or, just look at the HTML for this page to see Hi Jump in real use.
<APPLET code=Jump archive="hijump10.jar" width=252 height=45 alt="Hi Jump navigation">

<PARAM NAME=index VALUE="jump.hi">
<PARAM NAME=me VALUE="index.html">

<PARAM NAME=icons VALUE="proud.gif,sunken.gif">

<PARAM NAME=link1 VALUE="h">
<PARAM NAME=link2 VALUE="p">
<PARAM NAME=link3 VALUE="l">
<PARAM NAME=link4 VALUE="r">

<PARAM NAME=link5 VALUE=",mailto:support@phdcc.com,Support\nQuestions">
<PARAM NAME=link6 VALUE="b,glossary.html,Glossary,_top">
<PARAM NAME=link7 VALUE="d,http://www.phdcc.com/helpindex/,PHD Computer Consultants Ltd,_top">

<PARAM NAME=tipbgcolor VALUE="orange">
<PARAM NAME=bgcolor VALUE="white">
<PARAM NAME=fgcolor VALUE="blue">
<PARAM NAME=font VALUE="TimesRoman 8">

<!--If not Java-enabled, just provide a link to the home page-->

<A HREF="/"><IMG SRC="home.gif" ALT="Home page"></A>

</APPLET>
... And later on the web page, here is a second copy of Hi Jump running:
<APPLET code=Jump archive="hijump10.jar" width=252 height=45 alt="Hi Jump">

<PARAM NAME=slave VALUE="True">
<PARAM NAME=me VALUE="index.html">
</APPLET>


Deployment

To deploy Hi Jump on your web server or CD-ROM, you need to make all these files available. Note that the class files are usually not needed nowadays.

In the code base directory, put:

Obviously, you will need to include the necessary Hi Jump HTML on each web page where you want it to be visible. Make sure that the Me parameter is set correctly in each case. And similarly make sure that the CODEBASE points to the correct directory.

Note that Hi Lab does not include these files for you automatically.

A signed jar file, hijump10.jar, is available should you prefer to use it; use APPLET ARCHIVE="hijump10.jar" instead.


Possible Improvements


Notes

If a page appears twice in an index file, Hi Jump will only find the first instance.
HelpIndex    PHD