Hybrid drop-down menu / image-map menus
Defining the map
1. The image
iMMap applets can accept any image (JPG or GIF). The images
don't even necessarily have to be the same size as the applet,
although this may help. There's only one thing you need to remember:
tell the applet, using a parameter, what your image is called. For
example, if your image is called "myImage.jpg", you would write:
<param name="imagefile" value="myImage.jpg">
Particularly with image maps, it can be tempting to use
images with large byte sizes. Remember that any image must
be downloaded from the server before it can be used. This
applies equally whether you put the image into your HTML or an applet.
A 100 KB image takes the same time to transfer, whether there is
an applet there or not. The applet will have to wait until your image
is downloaded before it can get going with the image map. So if your
image is large, the applet has to wait for a long time.
Watchpoint: ensure that your image file has exactly the
same height and width as the applet! If it is smaller than
the applet, this will result in a terrible flicker.
2. The map
If you have used image maps before, you will probably know
that the maps are created using wizard tools in your web design
programme. We recommend the separate image-mapping tool
available from LiveImage.
Just in case you don't know much about normal
image mapping, we'll just remind you first.
The tools common in web design programmes normally allow
you to drag the mouse over the image and define rectangles
and hotspots in a point-and-click manner. The tools then
insert code into your HTML that looks
a bit like:
<MAP NAME="tour">
<!--Picture tour2.jpg-->
<AREA SHAPE="RECT" COORDS="0,0,411,31" HREF=" ">
<AREA SHAPE="RECT" COORDS="0,30,153,134" HREF=" ">
<AREA SHAPE="RECT" COORDS="0,132,153,236" HREF=" ">
<AREA SHAPE="RECT" COORDS="1,236,153,340" HREF=" ">
<AREA SHAPE="RECT" COORDS="154,30,257,185" HREF=" ">
<AREA SHAPE="RECT" COORDS="154,184,257,340" HREF=" ">
<AREA SHAPE="RECT" COORDS="258,30,411,134" HREF=" ">
<AREA SHAPE="RECT" COORDS="258,134,411,235" HREF=" ">
<AREA SHAPE="RECT" COORDS="258,235,411,340" HREF=" ">
</MAP>
In the HTML image maps the HREF attribute contains your link,
and sometimes there are also TARGET and ALT attributes with
frame names and messages for further configuration of the map.
These are not read by iMMap applets, which use the more detailed
index files for specifying hyperlinks, frames and messages.
Frontpage warning: Frontpage will insert spaces into the COORDS
coordinates above. These will disrupt reading of the map. Remove
the spaces manually.
Now we'll turn to how iMMap applet image maps work. These use
the same <MAP> definitions as above. i.e. you can use your
web design programme to point-and-click your way to a definition
of all the hotspots. You should normally place the results in
a separate simple text file, which the applet then reads from the server.
However if your HTML page is simple, the applet can also read the map from
the HTML as well. When you define your hotspots with the tool,
remember that you do not need to enter any URL's
or other information - just define the hotspots (as rectangles)
and save the results.
Some automatic imagemap creators will place extensions such as
.map on the end of the map files.
You should manually change such extensions
to .txt (because some servers will
not cope with other kinds of extension). Then you must tell the applet
what the map file is called.
<param name="mapfile" value="myMap.txt">
If you inserted the map file contents into your HTML page,
you would write:
<param name="mapfile" value="myPage.htm">
|
