Imagemaps: Server Side and Client Side
Discussion of server side and client side map differences excerpted from the WebCom User Guide:
The standard methods for doing imagemaps on the Web have traditionally involved a three step process:
Step three sometimes involves running a script on the server. Because of the steps involved, imagemaps tend to be slower than normal hotlinks, and use up much more system resources on the server.
- The client clicks on a point on the image
- The coordinates of the point clicked upon are sent to the server.
- The coordinates are matched against a file containing the list of URls and co-ordinates (called a "map" file), and the URL which is associated with those coordinates is returned to the client.
Client Side Imagemaps are imagemaps which do not have to make a separate call to the server to determine what URL should be returned to the browser. The coordinate/URL correlations are kept in the HTML coding of the page itself. After clicking on the image, a request for the correct URL is immediately sent to the server, just as when a normal hotlink is clicked. This method loads the page quicker, and uses less system resources in the process.
Another advantage of Client Side Imagemaps is that when the mouse pointer is held over sections of the map, the URL of the destination page shows in the browser (In Netscape it appears at the bottom of the window) instead of just coordinates.
The Apache-specific imagemap documentation below is part of the documentation for the imagemap module at http://httpd.apache.org/docs/1.3/mod/mod_imap.html.
Imagemap FileThe lines in the imagemap files can have one of several formats:The directive is one of
directive value [x,y ...]
directive value "Menu text" [x,y ...]
directive value x,y ... "Menu text"
point. The value is an absolute or relative URL, or one of the special values listed below. The coordinates are
x,ypairs separated by whitespace. The quoted text is used as the text of the link if a imagemap menu is generated. Lines beginning with '#' are comments.
Imagemap File DirectivesThere are six directives allowed in the imagemap file. The directives can come in any order, but are processed in the order they are found in the imagemap file.
- Has the effect of
<BASE HREF="value">. The non-absolute URLs of the map-file are taken relative to this value. The
basedirective overrides ImapBase as set in a .htaccess file or in the server configuration files. In the absence of an ImapBase configuration directive,
base_uriis synonymous with
base. Note that a trailing slash on the URL is significant.
- The action taken if the coordinates given do not fit any of the
rectdirectives, and there are no
pointdirectives. Defaults to
nocontentin the absence of an ImapDefault configuration setting, causing a status code of
204 No Contentto be returned. The client should keep the same page displayed.
- Takes three to one-hundred points, and is obeyed if the user selected coordinates fall within the polygon defined by these points.
- Takes the center coordinates of a circle and a point on the circle. Is obeyed if the user selected point is with the circle.
- Takes the coordinates of two opposing corners of a rectangle. Obeyed if the point selected is within this rectangle.
- Takes a single point. The point directive closest to the user selected point is obeyed if no other directives are satisfied. Note that
defaultwill not be followed if a
pointdirective is present and valid coordinates are given.
ValuesThe values for each of the directives can any of the following:
- a URL
- The URL can be relative or absolute URL. Relative URLs can contain '..' syntax and will be resolved relative to the
baseitself will not resolved according to the current value. A statement
base mailto:will work properly, though.
- Equivalent to the URL of the imagemap file itself. No coordinates are sent with this, so a menu will be generated unless ImapMenu is set to 'none'.
- Synonymous with
- Equivalent to the URL of the referring document. Defaults to
http://servername/if no Referer: header was present.
- Sends a status code of
204 No Content, telling the client to keep the same page displayed. Valid for all but
- Fails with a
500 Server Error. Valid for all but
base, but sort of silly for anything but
- A coordinate consists of an x and a y value separated by a comma. The coordinates are separated from each other by whitespace. To accommodate the way Lynx handles imagemaps, should a user select the coordinate
0,0, it is as if no coordinate had been selected.
After the value or after the coordinates, the line optionally may contain text within double quotes. This string is used as the text for the link if a menu is generated:
<a HREF="http://foo.com/">Menu text</a>
If no quoted text is present, the name of the link will be used as the text:
It is impossible to escape double quotes within this text.
#Comments are printed in a 'formatted' or 'semiformatted' menu.
#And can contain html tags. <hr>
poly map "Could I have a menu, please?"
0,0 0,10 10,10 10,0
rect .. 0,0 77,27 "the directory of the
feedback/ 195,0 305,27
rect another_file "in same directory as
referer" 306,0 419,27
point http://www.zyzzyva.com/ 100,100
point http://www.tripod.com/ 200,200
rect mailto:email@example.com 100,150 200,0
Referencing your mapfile
<IMG ISMAP SRC="/images/imagemap1.gif">