You can implement a clickable image map in two ways, as a client-side map or as a server-side map. Although both are explained below, a client-side map is the preferred method. Its advantages are that the processing of what link to follow on the region of the map occurs at the client side (on your computer). Nor does it require you to have a separate CGI program in a CGI bin just to handle the image map, something you would have to have with a server-side implementation. Thus once a clickable map is downloaded to your computer, it does not have to communicate with the original server where the map was received from to determine where you next want to go. Contrast this with a server-side implementation which would take two requests to the server (and two receptions of data) to do the same effect, a much more inefficient process.
In most browsers, as a user positions the mouse over regions of the client side image map, the URL that the region is linked to is displayed on the status line at the bottom of the browser window.
Image Map Components
Graphic as an Image Map
<IMG SRC="imageFile.gif" USEMAP="#mapFileName">
The #mapFileName associates the image file with the embedded map file.
Pixel Coordinates
Coordinates are relative to the image starting at (0,0), the upper-left corner. Many drawing/image editing programs give this information, (see "Image Map Tools" below for utilities). Rectangle regions are specified by the upper left (x1,y1) and lower right (x2,y2) pixel corner locations. Circle regions are specified by the center point (x1,y1) and the length of the radius (in pixels). Polygon regions are specified by the coordinates of each vertex in order of the polygon, (a limit of < 100 points).
The block of code that associates an image map with clickable regions and hperlinks is contained in the HTML MAP tag. The name in the MAP tag must correspond with the name used in the USEMAP attribute of an IMG tag. The format of the MAP tag is as follows:
<MAP NAME=" mapFileName">
The MAP tag is immediately followed by the AREA tag with SHAPE, COORDS and HREF attributes. The format of the AREA tag is as follows:
<AREA SHAPE="shapeType" COORDS=" x1,y1 , x2,y2 , ..." HREF="URL">
The shape type must be one of the following: "RECT", "CIRCLE", "POLYGON". The COORDinateS must adhere to the pixel specification explained above. The URL gives the document link for the map region.
Example
The following image of the world contains links to more detailed images of each continent. Client side image maps, in most browsers, have the behavior of indicating the linked document URL on a status line as the mouse is positioned over the image map regions.
The IMG tag specification is given by the following HTML:
<IMG SRC="world.gif" WIDTH=254 HEIGHT=131 BORDER=0 ALIGN=bottom usemap="#world">
The "world" map file specification is given by the following HTML:
<MAP NAME="world">
<AREA SHAPE="rect" COORDS="66,56,107,109" HREF="samer.gif">
<AREA SHAPE="rect" COORDS="57,119,212,132" HREF="antarctica.gif">
<AREA SHAPE="polygon" COORDS="130,18 176,7 163,26 165,48 160,53 150,41 145,33 129,30 122,36 126,25 130,18" HREF="europe.gif">
<AREA SHAPE="polygon" COORDS="141,93 160,58 144,42 122,38 116,49 120,61 134,62 141,93" HREF="africa.gif">
<AREA SHAPE="circle" COORDS="203,73, 40" HREF="australia.gif"><AREA SHAPE="circle" COORDS="31, 2, 83" HREF="namer.gif">
<AREA SHAPE="circle" COORDS="163,7, 69" HREF="asia.gif">
<AREA SHAPE="rect" COORDS="0,0,254,131" HREF="imagemapcs.html">
</MAP>The last rectangle shape is a default link specification. The coordinates specify the entire image. It indicates the document to be referenced if a user clicks on a region of the image which is NOT covered by a previous specified link. It must be entered as the last shape tag in a map to prevent it from trapping or overlaying all other shape links.
Server side image maps differ from client side image maps by distributing the map file separately, (in another file external from the HTML file containing the image map). To use server side maps, the web server system administrator must install the image file in a system directory and link it and the html document that references it to a cgi-bin (Common Gateway Interface binary) program that handles the server side image maps. In most browsers, a server side image map indicates the pixel coordinates, not the URL of the associated link, on a status line when you position the mouse over the image map regions.
Some web authors fake image maps by the use of tables. By physically cutting an image up into sections, one can specify each image section in a table cell. The cells must have no (zero) spacing to be displayed correctly. Each image section contains a link, wrapped around it, to the corresponding URL.
A client-side image map is preferred over a table image map because loading many small image files is slower than loading a single large file. The resource needed on the client side to create each file request and send it over the Internet, and the resource used on the server-side to process each requested file and transfer it over the Internet to the client is much higher with a table image map.
