|
Image
maps 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 image maps
FrontPage does everything for you. FrontPage has a built-in image
map 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
Image maps (recommended method)
Client-side image maps 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 image map is much
more efficient than the server-side image map 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 Map Edit (PC),WebMap (Mac) and Fireworks3.0
(PC), 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 image map" 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 image map offline
if the links refer to files on your local PC.
Server-side Image maps
Server-side image maps are less efficient and less user friendly
than client-side image maps, but they are more widely supported,
especially with older browsers.
We use the Apache built-in image map processor, mod_imap, to process
image map requests. mod_imap gives you the same basic functionality
as either /cgi-bin/image map 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 image map functionality, you need to perform
two steps. First you need to create your image map 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
|
