MapApps

Java Imagemap Applet Freeware

by John Criswick, The Internet Conveyor Ltd.


Introduction

Java Imagemap Pros and Cons

Downloading and Using MapApps

MapApp Update List and Comments

Other Imagemaps Out There


Introduction

Java based imagemaps can provide an alternative to server side and client side imagemaps. A Java imagemap can provide varying degrees of interactivity beyond these.

Compare the following two imagemaps: the first is implemented in Java, the second is the "sercer side" way of implementing an imagemap. To compare them, I have set up links so that the right and left arrows for each imagemap will take you to a different but same sized page. Also, compare the status feedback that you see as you move your mouse over each image.

In Java:

[You will need a Java capable browser to view this applet]

Using Server side Imagemaps:


Java Imagemap Pros and Cons


Pros: (advantages)

User Feedback

This is probably the most important advantage of Java based imagemaps. With Java, users can appreciate more feedback while making their selections. Although not necessarily demonstrated here since I have only implemented a "bare bones" imagemap.

No default method required

What happens when a user clicks on an imagemap in a place that isn't "hot"? Since the imagemap is a hypertext anchor, users are always taken to another page. This obviously leads to an increase of time wastage and server traffic. Java imagemaps give users more decisive power while surfing through web documents.

Usable on CDROM and in standalone applications

If you are considering using imagemaps in standalone web documents or on CDROMs, you can either use client side image maps or Java based image maps. Still, a better "pro" worth considering is what level of feedback and user interface do you want to provide.

Improved security and reduced CPU overhead on server

If I compare to a server side imagemap, the task of navigating a document is handed over to the client. This means a server side imagemap script is no longer required and that equates to improved security and reduced server CPU overhead.


Cons: (disadvantages)

Increased download time and increased traffic on server

The same bandwidth concerns you apply to adding images to HTML documents should also be considered when adding Java applets. MapApp1 is 6,291 bytes and in addition, it downloads the map layout file which is typically 250 bytes. This translates to about an extra 3.6 seconds in download time for a 14,400 baud modem user. You will have to weigh this aspect with the above advantages!


Downloading and Using MapApps

Intro

MapApp1

MapApp2

Image Map Layout File

Intro...
Two MapApps are currently available. MapApp1 provides the minimum functionality in the series. MapApp2 adds the ability for the user to see the "hot areas" by pressing on any key (while the mouse is over the imagemap).

To minimize the size of the applet I have excluded error messages and made a few restrictions on how the imagemap data is read in. In order to debug your imagemap layout, just use MapApp2 to let you see the hot region layout.

MapApps use the same map layout as for the imagemap script used by NCSA's httpd server (as explained here). So you hopefully will not need to redo this map file, but just to copy it to a new location.

Note that some beta versions of Netscape 2.0 will not show properly the contents of the status bar - unfortunately.

MapApp1:


The main interface enhancements of MapApp1 over the original imagemap are:

- URL anchors are shown in the status bar as the user moves the mouse over the imagemap
- no default URL is required in your map layout definition
- holding the mouse button down in the imagemap is like using a button in the sense that the user only sees either their current selection or nothing if they move out of the hot region. This is my way of telling the user they can chose not to select a region by moving out of it.

MapApp1: (6,291 bytes) [You will need a Java capable browser to view this applet]

Applet Tag Usage for MapApp1:

The applet tag for the above applet looks something like:

  <applet codebase="classes" code="MapApp1" width=279 height=32>
  <param name=image value="samplemap.gif">
  <param name=map value="samplemap.map">
  </applet>
Notes:

- the width and height values should exactly match those of the image.
- the image specified is relative to the current document, not an absolute URL
- the map layout file is also relative to the current document
- just before </applet> you can put in regular HTML that will be seen by Non-Java browsers and not by Java Browsers, e.g. this is where you place the original imagemap HTML statements.

Click here to download MapApp1. Place this file in your classes directory, if your applet tag has codebase="classes".

MapApp2:


MapApp2 is the same as MapApp1 but with additional code to help the user find the hot areas. To see the hot areas put the mouse over the imagemap and press any key.

MapApp2: (8,164 bytes) [You will need a Java capable browser to view this applet]

Applet Tag Usage for MapApp2:

The usage is the same as MapApp1 except that you are allowed to specify the colour of the highlighted hot areas (you can use either spelling of colour or color). Valid colours are: black, gray, darkgray, lightgray, blue, cyan, magenta, green, yellow, orange, red, pink and white.

  <param name=colour value=green>
Click here to download MapApp2. Place this file in your classes directory, if your applet tag has codebase="classes".

Image Map Layout File:


See this reference at NCSA for more information on setting up the map file. There are some additional restrictions and flexibilities however:

Restrictions:

- if you want to specify a default URL you must specify the URL, do not leave the line blank after the default statement.
- coordinates must not have space characters in them. The first example is acceptable, the second is not because it has a space before the 55:
24,45    23, 55
Flexibilities:

- you do not need to specify a default method. This implies there will be parts of the imagemap that do not respond to the mouse button.
Note: any errors encountered in the layout of a method (rect, poly etc.) will result in it being ignored. Therefore I recommend using the feature in MapApp2 of holding the key down to verify your layout.


MapApp Update List and Comments

To receive notification of updates and additions to the MapApp library send mail to
mapapps@conveyor.com with subscribe mapapps in the subject of the message. Send comments, URLs and requests for features or bug reports to John Criswick at criswick@conveyor.com.

As MapApps are Freeware, no warrantee is implied here in any sense. Therefore use them at your own risk, if any! But feel free to send me your URL so I can check out how you used it!


Other Imagemaps Out There

A small list of some other Java based imagemap applets worth checking out.

CubeMap at Netrex Inc. - make sure you move your mouse quickly over the three cube faces!

Java Client Imagemap Authoring