hypermap.com Home Develop Contribute Tutorial Manual Download Contact

hypermap.com Quick Tutorial

Tutorial

A hypermap is a configurable applet (a program written using the Java programming language specifically for use attached to web pages).

You do not need any knowledge of Java at all to create and install a hypermap on a web page. A very basic knowledge of HTML is required, the same knowledge that is needed to create a web page in the first place.

This one page quick tutorial will have you creating, installing & editing a simple useful hypermap on a web page within the next 30 minutes - so if you have 30 minutes to spare right now... off we go...

Step 1

Readers Action : Create a new folder called say c:\hypermap and press here to download hypermap.zip file containing 3 java .class files, 1 .html file and 1 picture .jpg into this new folder.

[ If you cannot or do not want to unzip the hypermap.zip compressed file you can download each file here into your c:\hypermap folder by selecting each of the following file names in turn :

hypermapv6.class

hypermapareav6.class

hypermapareaurlv6.class

sample.html (this html file may automatically open in your browser, you will need to selected File -> Save As... from your browser & save the file to the c:hypermap directory.)

(the following three picture files may automatically open in your paint package after you have down loaded them, if this happens you will need to selected File -> Save As... from your paint package & save the files to the c:hypermap directory.)

sample.jpg

hypermap.gif

sidebar.gif ]

Note the 3 java .class files are the hypermap program files these simply need to be always in the same directory as the .html files that use them. There is never a need to try to edit or change these files.

Step 2

You should now have 5 files downloaded in a folder called c:\hypermap

Readers Action : Open up any Internet browser such as Internet Explorer or Netscape Navigator, select File -> Open and navigate till you find the file sample.html that you have just placed in your c:\hypermap folder in step 1 above. Open up this file to view the sample hypermap being used in this tutorial.

Step 3

We are going to change the value of a parameter in the sample.html file, save the file, open it up in a browser and see what effect our change has made to the look of the hypermap displayed.

Readers Action : Open up the sample.html file in any simple text editor, notepad or wordpad will do fine or select View - Source using your Internet browser while the sample.html file is open. Briefly survey the sample.html HTML code then please read the following...

The part of the sample.html HTML code that configures the hypermap java applet lies between the HTML tags...

<applet code="hypermapv6.class" width=500 height=150 viewastext>

... and...

</applet>

(Note : width=500 height=150, sets the size of the hypermap on the web page)

Between these two tags is a long list of parameters (data values sent to the hypemap applet program). You can adjust these values to configure the hypermap applet till it is just as you want it to be.

<param name="mapimage" value="sample.jpg">

<param name="mapimagewidth" value="500">

<param name="mapimageheight" value="150">

<param name="fgcolor" value="#0000cc"> etc...

The meaning of each & everyone of these parameters can be found in the hypermap online manual found at :

www.hypermap.com/manual.html

Readers Action : Using your HTML editor (Notepad, Wordpad or Dreamweaver for example) open up sample.html and change the tag that reads :

<param name="outline" value="black">

so that it now reads :

<param name="outline" value="yellow">

Save the sample.html file then using your Internet browser open the web page again (or press 'refresh page' on your Internet browser if the sample.html file is viewable already).

You can now see the changed sample.html file.

Use the hypermap on the sample.html page & identify which component on the screen has changed color from black to yellow - it is the outline displayed when the user moves the mouse over an area.

Step 4

We are going to add a new parameter to the sample.html file with the aim of adding a new item (and associated url) to the 'News' area list box on the hypermap.

Readers Action : Going back to your HTML editor find the line in the file sample.html that states :

<param name="url-1-5" value="http://www.scotsman.com/,The Scotsman">

and below this line, insert the following new line (you can copy & paste it from here):

<param name="url-1-6" value="http://www.guardian.co.uk/,The Guardian">

Save the sample.html file then open the web page again (or press 'refresh page' on your internet browser if the sample.html file is viewable already) to view the changed sample.html file.

Using the hypermap, select 'News', scroll the 'News' list to the bottom. A new item has been added by you to the list - the new item is called The Guardian and selecting this item now opens the page http://www.guardian.co.uk/

Readers Action : Please Note :

For the new line the

param name="url-1-5"..... part of the parameter

has increased by 1 to

param name="url-1-6"

url-1 stands for the first area on the hypermap

(url-2 would be the second area, url-3 the third etc)

url-1-5 stands for the fifth Url (web page address) on the first area.

The numbers must increase consecutively with no numbers missing from the sequence for any given area.

"url-1-6"..

"url-1-7"..

"url-1-8"...

If the sequence is broken the hypermap will ignore all parameter entrys (that is additional urls) for an area from that point on. It will then continue to read the rest of the hypermap applet parameters as normal.

Readers Action : Please Note : Refer to this concise online manual as you configure the hypermap to your satisfaction.

The manual is to be found at

www.hypermap.com/manual.html

In general you will find yourself changing a parameter, saving your HTML web page file, then opening it up (or pressing refresh) in your web browser to view the effects of your change. This cycle of change & review is just the same as if your were changing any piece of HTML coding.

Step 5 - the last step

We are going to add a new area to our sample.html hypermap. This area will associate a number of urls to the 'Career' label on the sample.jpg picture file.

Readers Action : Going back to your HTML editor find the line in the file sample.html that states :

</applet>

This is the last line of HTML code refering to the hypermap applet.

To add the parameter code for the 'Career' label on the sample.html hypermap add the following block of lines just before this </applet> line.

As just explained above copy & paste the code below into your sample.html file...

<param name="shape-4" value="rect,left,right,top,bottom,430,123,496,148">
<param name="url-4-1" value="http://www.internet-magazine.com/,Internet Magazine">
<param name="url-4-2" value="http://www.zdnet.com/,ZdNet.com Magazine">
<param name="url-4-3" value="http://softwaredev.earthweb.com/,Developer.com">
<param name="url-4-4" value="http://manuals.sybase.com/,Sybase Manuals">
<param name="url-4-5" value="http://www.stepstone.co.uk/sok/,StepStone Job Agency">
<param name="url-4-6" value="http://www.computerpeople.com,Computer People Agency">
<param name="url-4-7" value="http://www.jobsearch.co.uk/,Job Search UK">
<param name="text-4-1" value="Career">
<param name="window-4-1" value="Career">

Save the sample.html file then open the web page again (or press 'refresh page' on your internet browser if the sample.html file is viewable already). The hypermap has been changed.

Move the mouse pointer over the word 'Career' and press the mouse button, the list box now appears where before nothing happened, selecting an item from the list box with the mouse pointer opens that item's web page.

Readers Action : Please read :

Now finally, the HTML code above need some explanation :

<param name="shape-4" value="rect,left,right,top,bottom,430,123,496,148">

means this :

<param name="shape-4" means this is the fourth shape (or area, the words area and shape are synomous in this context)

value="rect,left,right,top,bottom, has a complex meaning, it directs the hypermap as to where to put the list box in relation to the rectangular 'Career' area (shape) in the order of preference of left,right,top,bottom. This means that the hypermap Java applet program code will first look to see if there is enough room on the applet to put the list box to the left of the 'Career' area and still leave all of the list box showing.

If there is not enough room on the left, it will then try your next preference, the right of the 'Career' area in this case. If still not enough room it will try to fit the list box on top of the area etc. In the case of the 'Career' area all four preference were tried but there is not enough room for any of them, the hypermap code then placed the list box where it thought was best, to the top left of the 'Career' area - a good choice.

430,123,496,148" these final four figures specify where on the hypermap the hypermap rectangle is to be placed. The first two figures (430,123) are the X, Y coordinates of the top left of the 'Career' area (shape) rectangle in pixels as measured from the top left of the shape.jpg picture. The last two figures (496,148") are the X, Y coordinates of the bottom right of the 'Career' area (shape) rectangle in pixels as measured from the top left of the shape.jpg picture.

To discover what the X, Y pixel values are for any given picture open the .jpg picture in a paint package. Move the mouse pointer over the picture and read off the X,Y pixel coordinates of the mouse pointer displayed on the tool bar at the base of the paint application's window. Make a note of these points for the top left and bottom left of the rectangle that will define the hypermap area, then place them in the relevant line of HTML code as in :

<param name="shape-4" value="rect,left,right,top,bottom,430,123,496,148">

Readers Action : Final reading :

<param name="url-4-1" value="http://www.internet-magazine.com/,Internet Magazine">
<param name="url-4-2" value="http://www.zdnet.com/,ZdNet.com Magazine">
<param name="url-4-3" value="http://softwaredev.earthweb.com/,Developer.com">
<param name="url-4-4" value="http://manuals.sybase.com/,Sybase Manuals">
<param name="url-4-5" value="http://www.stepstone.co.uk/sok/,StepStone Job Agency">
<param name="url-4-6" value="http://www.computerpeople.com,Computer People Agency">
<param name="url-4-7" value="http://www.jobsearch.co.uk/,Job Search UK">

lists the area (shape) urls and their descriptions ( as discussed in step 3 above)

The final two lines :

<param name="text-4-1" value="Career">
<param name="window-4-1" value="Career">

identify the name of the area to appear on hypermap labels below the area which is selected and above the hypermap list box.

Conclusion :

After a short time, modifying the hypermap parameters and testing the changes in a web browser becomes second nature as you work to configure your hypermap to meet your requirements.

Your final hypermap will have your own picture, areas to be selected and hyperlinks to be selected from the associated list box. You will have selected the colours of the list box, label, and highlighted areas. Visually you have designed and configured every aspect of the hypermap.

Finally the hypermap as a whole will contribute to meeting the requirements of the overall application in which it resides.

To contact the developer of this hypermap Java applet with any questions or comments - click here.


Appendix

Your final quick tutorial hypermap should look & behave like the hypermap below. If it does not, you could select your Internet browser's View -> Source code menu option for this page and compare the HTML source code for this hypermap below (that appears near the bottom of this page's HTML) with the hypermap HTML code in the sample.html file you have modified.

 

 

 

Top