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.
|
|
