Imagemaps allow the user to click on
predefined sections of a graphic picture on your page and have the
server respond as if they clicked on a text hyperlink.
FrontPage users:
If you have the FrontPage extensions installed in
your account, you do not need to worry about client-side
or server-side imagemaps. FrontPage does everything for
you. FrontPage has a built-in imagemap editor which you
can use to map out your 'hot spots' and it automatically
generates client-side and server-side code for you. |
Client-side Imagemaps
(recommended method)
Client-side imagemaps do not require the
presence of a server-side script in order to interpret the
coordinates of the "hot" regions of your multi-clickable
image. The client-side imagemap is much more efficient than the
server-side imagemap and it allows the visitor to see the actual
URL associated with the mapped regions in the status bar of their
web browser.
- Download a mapping program to create a
map file based on the desired image. The map file will contain
the coordinates of each clickable region. We recommend MapEdit
(PC) and WebMap
(Mac), but other
imagemapping tools may also be available.
- Map out the hotspots using one of these
programs and select the map file format "Client-side
imagemap" as opposed to NCSA or CERN (for server-side
maps) prior to saving the file.
Here is a sample client-side map file
created using MapEdit:
<map
name="sample">
<area shape="rect" coords="20,27,82,111"
href="hotspot1.html">
<area shape="circle" coords="129,113,29"
href="hotspot2.html">
<area shape="rect" coords="21,158,170,211"
href="mailto:support@abcdefghi.com">
<area shape="default" nohref>
</map> |
- Include the map file code within the
desired HTML document and reference it like so:
| <img
border="0" src="image.gif" usemap="#sample"> |
Substitute the name of the desired image
above and note the relationship between the HTML tag, <map
name="sample"> and the usemap="#sample"
attribute above. You can test your new client-side imagemap
offline if the links refer to files on your local PC.
Server-side Imagemaps on
UNIX
Server-side imagemaps are less efficient and
less user friendly than client-side imagemaps, but they are more
widely supported, especially with older browsers.
We use the Apache built-in imagemap
processor, mod_imap, to process imagemap
requests. mod_imap gives you the same basic
functionality as either /cgi-bin/imagemap or /cgi-bin/htimage, but
allows simpler HTML coding, runs faster, and has a variety of
additional functions that you can use, including text menu
generation for text-only browsers.
To implement mod_imap
imagemap functionality, you need to perform two steps. First you
need to create your imagemap file in NCSA format
using an imagemapping tool such as MapEdit
(PC) and WebMap
(Mac).
# sample NCSA map file
rect /sales/index.html 5,11 20,32
poly /about/company.html 40,36 80,34 75,40 40,70
circle /contact.html#jeff 120,88 130,102
default /index.html |
Then you need to reference your map file
from its corresponding image in your HTML like this:
<A HREF="/somepath/somemapfile.map">
<IMG border="0" SRC="someimage.gif"
ISMAP></A> |
Full details of the format as used by
mod_imap can be found at:
http://www.apache.org/docs/mod/mod_imap.html
The file format information is in the second half of the page;
the first half deals primarily with .htaccess options for text
menu generation and other advanced features. You can ignore that
information if you don't plan to use those features.
Converting from /cgi-bin/imagemap to
mod_imap:
If you're currently using /cgi-bin/imagemap,
it is easy to switch to mod_imap. If your HTML looks like this:
<A HREF="/cgi-bin/imagemap/somepath/mapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>
Just change it to:
<A HREF="/somepath/mapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>
And you're done. Notice that all you're
doing is removing the '/cgi-bin/imagemap' part. mod_imap and /cgi-bin/imagemap
both use the NCSA imagemap format, so no other
changes are needed.
Converting from /cgi-bin/htimage to
mod_imap:
If you're currently using /cgi-bin/htimage,
you'll make a similar change, i.e.:
<A HREF="/cgi-bin/htimage/somepath/mapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>
becomes:
<A HREF="/somepath/mapfile.map">
<IMG border="0" SRC="someimage.gif" ISMAP></A>
The htimage program uses the CERN imagemap
format, so you must also convert your mapfiles to NCSA format. If
you're using a graphical imagemap editor, most allow you to
"Save As" either format, so you should be able to just
load your files and resave them under NCSA format. If your editor
doesn't support NCSA, or you are creating your mapfiles manually,
you must make the changes yourself.
A simple example comparing the CERN and NCSA
formats can be found at:
http://www.ihip.com/mapfile.html |
