Image maps are fully supported
through IgLou WorldLinks. Basically, the idea of an image map is to provide
the user with a single GIF or JPG picture that contains one or more
clickable regions that will send the user off to different areas,
depending upon where they click.
Image maps provide a nice interface,
as you can design pleasing designs on a single GIF/JPG image that contains
different items to choose from.
Implementing image maps requires
three steps. Each of these steps is outlined below:
- Write the IMG anchor into your HTML
file
To do this, simply use a regular <IMG> anchor pointing to the
image that contains your imagemap graphic. However, you must also
include the ISMAP keyword within the anchor. This indicates to
the WWW server that the image about to be displayed will be
clickable.
For example:
- Create the imagemap .map file
Because the WWW server needs to know the areas within your
picture that are clickable, you will need to use special
software that runs on either MS Windows or on Macintosh
to highlight the areas that are clickable.
This software will basically do nothing more than
create an ASCII text file that contains the coordinate
boundaries of each clickable region, as well as the
name of the .html file to load if you click on each
respective region.
This map file is really the key to everything, as it
makes the association of each region to the page that
it should link itself to.
You can find this software on the WorldLinks support page
at the URL of
http://www.iglou.com/worldlinks/tools underneath
the HTML editors menu.
Be sure to create your .map files in NCSA format. Most
software packages will support both CERN and NCSA formats,
and allow you to choose between the two when saving your work.
Once you have created the .map file, simply upload a copy
of the map file into the same directory as the .html file
you created in Step 1.
- Create the <A HREF> anchor
around your <IMG> anchor
Now, you will need to re-edit the .html file you created
in Step 1. Find the line that has the <IMG> reference
created in Step 1.
Surround this line with the following <A HREF> information,
as shown below:
Now, do the following:
Change the word whatever.map to whatever the filename
is of the image map file created in step 2.
For example, if your map file was called testing.map, then it
should read:
- You're done!
You should now be able to load your page and click on different
areas of your image to automatically take you to various different
places, depending upon how you created your map file...