| Sensomaps: java menus with maps, diagrams and drop-down menus
Map creation
Making a "sensomap" imagemap
Imagemaps are traditionally defined by arithmetical coordinates - you write
numbers which define the width, height and position of rectangles. If polygonal
shapes are required, the amount of numbers quickly gets larger - a pentagon requires
10 numbers against a rectangle's 4 numbers. If you want to describe the outline of
a country or machine-component, you could need 100's or 1000's of coordinates.
A "sensomap" dispenses with this completely. You require no numbers and
no coordinates to define the imagemap. Instead you create an additional colour-coded GIF image that is the same
size as your imagemap and edit it with a graphics editor. For each hotspot you wish
to define, you choose a new colour and just paint that colour onto the area which
is to be the hotspot. There are no restrictions as to the shape or continuity of the hotspot. You can
divide it into a 1000 unconnected pixels scattered across the GIF if you wish.
When choosing colours, remember that (i) the background must be white, and white
cannot define a hotspot; (ii) a GIF has a maximum of 256 colours; (iii) you are
recommended to choose clearly distinguishable colours.
The applet creates the imagemap out of a combination of three images:
- the main image,
- the rollover or focus image (which contains the images for rollover states)
- the colour-coded GIF
The way these images are combined is very simple. If the mouse
moves over a colour-coded area, wherever that colour extends, the rollover image
is shown - everywhere else the main image is shown.
Examples (images have been scaled down to fit this page):
|
Main image
|
Rollover image
|
Colour-coded GIF
|
|
|
|
|
The effect of this example would be to create an imagemap
which initially looks like the main image (left), but when
the mouse moves over the differently colour-coded states,
each state turns yellow by revealing a small secion of the
centre rollover image. The colour-coded GIF is never visible
to the site visitor - it just acts as a set of coordinates.
Connecting hotspots to your index file
Your index file will contain a list of hyperlinks and other information
relevant to each hotspot. How do you get the many index file entries
assigned the right way to the colour-coded GIF hotspots?
The applet does the assigning automatically.
Each colour-coded area is automatically assigned by the applet
to a top-level entry in your index file. Assignment is on a first come, first served
basis. The applet reads colours from left to right and top to bottom, and each time
a new colour is met, it assigns that colour area to the next top-level entry in
the index file.
The best way for you to harness this automatic system is to create a
dummy index file with one entry for each hotspot. Provisionally attach just a simple number to
each index file entry.
Then run the applet and watch where each number appears. This will tell
you how the applet is assigning the hotspots. Then substitute the number
with the information and hyperlinks you want to display.
If any of this is not clear, (i) examine the templates carefully, and then (ii)
experiment. The system is very easy once you get the hang of it.
|
| 
CURRENT MENU RANGE
 | 
 | This product range is called Sensomap menus. The diverse prices and benefits of these menus offer advantage to all types of designer from home-user to corporate. Their common point is that they are based around the concept of image-maps divided into detailed mouse-sensitive non-rectangular (polygonal, discontinuous) hotspots.
|
 |  |
MENUS IN THIS RANGE
|
|
|
| |
INFO FOR THIS RANGE
|
|
|
|
|
| |
SELECTED DEMOS
|
|
|
| |
|
