Client Side and Server Side Imagemaps
Last Updated: January 20, 2000
Server side imagemaps are one of the simplest forms of CGI's. A server side imagemap is an image with a hypertext anchor that points to a gateway program that can process the image and coordinate data. A client side imagemap links an image with the same type of coordinate data, however the client (or browser) processes the information without contacting the server. Since not all browsers support client side imagemaps, it is usually best to present your image linked with capability of both server side and client side image mapping.
Setting up an image map in this manner done in 3 easy steps:
Create Image
Creating the image will likely be the hardest part of configuring an imagemap. A sample image, representing a navigation bar, is shown below.
A sample image: navigation bar
Create Map
In order to relate regions of your image to hypertext links, a server "ismap" file and/or client "usemap" file must be constructed. Regions are specified in pixel coordinates measured from the upper left-hand corner of the image. A sample image with delimited regions overlayed in black is shown below.
A sample image with delimited rectangular regions
Server Maps
Regions of an image are specified using circles, rectangles,
polygons, and points. A default action must also exist in
the server map file. If the client clicks in any area that does not fall inside
one of the mapped regions, the default URL is issued.
The general form for server map file entry is:
method URL x1,y1 x2,y2 x3,y3 ... xn,ynAn example of each of the methods is shown below.
default URL
circle URL center edgepoint
rect URL upper_left_corner lower_right_corner
poly URL x1,y1 x2,y2 x3,y3 ... xn,yn
point URL x,y
You can include comments in the map files by placing a hash character,
"#", as the first character in the line.
# comment
A sample server side imagemap file is shown below:
- # Imagemap file for sampleimg.gif
default /cgi/library/imagemap/sample_default.html
# Home page for sample image
rect /cgi/library/imagemap/sample_home.html 22,18 84,92
# News page for sample image
rect /cgi/library/imagemap/sample_news.html 84,18 136,92
# Comments page for sample image
rect /cgi/library/imagemap/sample_mail.html 136,18 184,92
# Calendar page for sample image
rect /cgi/library/imagemap/sample_calendar.html 184,18 251,92
# Bulletin board page for sample image
rect /cgi/library/imagemap/sample_bulletin.html 251,18 307,92
# Web stats page for sample image
rect /cgi/library/imagemap/sample_stats.html 307,18 359,92
Client Maps
As with server maps, regions of an image are specified using circles,
rectangles, and polygons specified in pixel coordinates from the
upper left-hand corner of the image.
The general form for client map attribute is:
<map name="tagstring">
<area shape="rect" coords="x1,y1, x2,y2" href="region_url">
<area shape="circle" coords="x1,y1, r" href="region_url">
<area shape="polygon" coords="x1,y1, x2,y2 ... xn,yn" href="region_url">
..... more regions ...
</map>
A sample client side imagemap file is shown below:
- <map name="samplemap">
<area shape=rect coords="22,18 84,92"
href="/cgi/library/imagemap/sample_home.html">
<area shape=rect coords="84,18 136,92"
href="/cgi/library/imagemap/sample_news.html">
<area shape=rect coords="136,18 184,92"
href="/cgi/library/imagemap/sample_mail.html">
<area shape=rect coords="184,18 251,92"
href="/cgi/library/imagemap/sample_calendar.html">
<area shape=rect coords="251,18 307,92"
href="/cgi/library/imagemap/sample_bulletin.html">
<area shape=rect coords="307,18 359,92"
href="/cgi/library/imagemap/sample_stats.html">
</map>
Generating a map file is not difficult and requires only patience, concentration, and an image viewing program to extract pixel coordinates. Of course, building an image map would be much easier if access to some graphical tool were available. Fortunately, such tools are available. Map This is a comprehensive freeware graphical tool that provides a clean, easy-to-use interface. Map This is only avaialble for Windows operating systems. Mapedit by Thomas Boutell is a shareware graphical tool that seamlessly constructs maps for images. Mapedit is available for both UNIX and PCs running Windows. More information about Map This and Mapedit can be found at the following URL:
- Map This
http://www.ecaetc.ohio-state.edu/tc/mt/Mapedit
http://www.boutell.com/mapedit/
Link Image to Map
Linking to Server Side MapsThe final step is to link the image to its map file. An example of the HTML markup to make an image with a server side imagemap is given below:
<a href = "/cgi-bin/imagemap/path/file.map">
<img border=0 src="sampleimg.gif" ismap></a>
Server side imagemaps use a CGI titled "imagemap". The
/cgi-bin/imagemap is the actual specification of the imagemap CGI....
the pathname (relative to your main htdocs directory) /path/file.map of
the imagemap file is then appended to the CGI specification as shown. The
\"ismap\" attribute in the image tag signifies that the coordinates
of a mouse click should be sent to the cgi handling the query.
Linking to Client Side Maps
An example of the HTML markup to make an image with a client side image map is
given below:
<map name="samplemap">
<area shape=rect coords="22,18 84,92"
href="/cgi/library/imagemap/sample_home.html">
<area shape=rect coords="84,18 136,92"
href="/cgi/library/imagemap/sample_news.html">
<area shape=rect coords="136,18 184,92"
href="/cgi/library/imagemap/sample_mail.html">
<area shape=rect coords="184,18 251,92"
href="/cgi/library/imagemap/sample_calendar.html">
<area shape=rect coords="251,18 307,92"
href="/cgi/library/imagemap/sample_bulletin.html">
<area shape=rect coords="307,18 359,92"
href="/cgi/library/imagemap/sample_stats.html">
</map>
<img border=0 src="sampleimg.gif" USEMAP="#samplemap"></a>
Note that the tagstring specified in the map tag, samplemap, is
referenced in the image tag with the \"USEMAP\" attribute. Combining Server Side and Client Side Maps
Since not all browsers support client side imagemaps, it is wise to use both
the "ismap" and "usemap" attributes in the image attribute.
For example:
<map name="samplemap">
<area shape=rect coords="22,18 84,92"
onMouseOver="status='Home Page'; return true"
onMouseOut="status=''; return true"
href="/cgi/library/imagemap/sample_home.html">
<area shape=rect coords="84,18 136,92"
onMouseOver="status='Latest Announcements'; return true"
onMouseOut="status=''; return true"
href="/cgi/library/imagemap/sample_news.html">
<area shape=rect coords="136,18 184,92"
onMouseOver="status='Mailing List'; return true"
onMouseOut="status=''; return true"
href="/cgi/library/imagemap/sample_mail.html">
<area shape=rect coords="184,18 251,92"
onMouseOver="status='Upcoming Events'; return true"
onMouseOut="status=''; return true"
href="/cgi/library/imagemap/sample_calendar.html">
<area shape=rect coords="251,18 307,92"
href="/cgi/library/imagemap/sample_bulletin.html">
onMouseOver="status='Notes from our CEO'; return true"
onMouseOut="status=''; return true"
<area shape=rect coords="307,18 359,92"
onMouseOver="status='Access Statistics'; return true"
onMouseOut="status=''; return true"
href="/cgi/library/imagemap/sample_stats.html">
</map>
<a href = "/cgi-bin/imagemap/path/file.map">
<img border=0 src="sampleimg.gif" USEMAP="#samplemap" ismap></a>
You will note the additions of the onMouseOver and onMouseOut attributes to the area tags. These attributes allow you to control what text appears in the status bar of the client browser.
The sample image shown below is anchored to a server side map file (go ahead and test it).
A sample image anchored to both server and client side map files
For a more thorough presentation of server side Imagemaps, the inquistive CGI student is referred to the NCSA Imagemap Tutorial at the following URL:
http://hoohoo.ncsa.uiuc.edu/docs/setup/admin/Imagemap.html
For a more thorough presentation of client side Imagemaps, the inquistive CGI student is referred to the Spyglass Imagemap Tutorial at the following URL:
http://www.spyglass.com/techspec/tutorial/img_maps.html