Clickable image maps are an alternative to text-based links for navigating around the Web. Imagemaps are usually highly decorative, and add appeal to the page. Some are quite functional. For example, one could use a clickable map of a city to present views of various locations. The county horticulturist directory in Aggie Horticulture is an example of a location type map.

While imagemaps are decorative and useful, they may increase page loading times and may befuddle users who navigate the Web with "load images" turned off in their browser preferences. Your page should present an alternative for "text only" browsers by way of a text-based navigation bar as well.

This illustrated presentation will show how to make clickable imagemaps and how to serve "client-side" maps using an advanced browser (Netscape or Internet Explorer).

Making Clickable Imagemaps

A suitable imagemap utility, a web design package (such as Adobe PageMill^TM), or graphics application that gives the "pixel positon" of the cursor as it traverses an image is used to map the image file (usually a gif file).

• Imagemap Shareware for Windows
• Imagemap Shareware for Macintosh

Maps are usually created in NCSA format, although the CERN format is an alternative. The mapping utility usually has an array of geometric figure drawing tools that can be used to highlight the area being mapped, that is simultaneously converted to map coordinates and can be linked to a URL (either on the local server or as an http connection). This address is then associated with that portion of the graphic. Text areas on a map can be given links in the same manner.

After all the links are mapped on the gif image, the gif file is saved, and the accompanying map text (coordinates and associated links) is placed in the referring HTML file.

Alternatively, you may bypass the use of a software package to map an image and write the code directly. If attempting this, you must first visualize the image as divided into coordinates (pixels).

Rectangular portions can be made clickable by using the code:

< area shape="rect" coords="x1,y1,x2,y2" href="filename">

where (x1,y1) is the upper left point of the rectangle and (x2,y2) the lower right. For example to map a rectangle 50 pixels wide and 100 pixels tall in the upper left corner of an image the code would look like:

< area shape="rect" coords="0,0,50,100" href="filename">

Serving Imagemaps via a cgi script

"Server-side" image maps require that the http server on which they are placed have installed a cgi (common gateway interface) utility that serves imagemaps. This utility allows different computer operating systems to communicate map positions and requests for files in a common language. The imagemap server used on Aggie Horticulture is ImageMap CGI.

Server-side imagemaps must be written with a reference to the cgi script on the serving computer. This procedure is fairly complicated and will not be covered in this course.

Client-side Imagemaps

Client-side imagemaps have the cursor position information contained within the html. This saves a trip to and from the server when a map position is clicked, and is ultimately a simpler tool to create. However, not all browsers support client-side imagemaps (Internet Explorer and Netscape versions 2.0 and later, some others). Undoubtedly, most will in the future.

The most widely supported means of serving a client-side image map is the <MAP> definition tag and the USEMAP command.

A combination ISMAP - USEMAP command can be used to allow for serving client-side mapping as a first choice with server-side mapping if the browser does not support client-side mapping but this technique will not be discussed here.

Examples of Different Imagemap Techniques

Image and Text Based Version of Wildflowers in bloom site.

Server-Side Imagemap Version of Wildflowers in bloom site served by Aggie Horticulture.

Server-Side Imagemap Version of Wildflowers in bloom site served by UNIX.

Client-Side Version of Wildflowers in bloom site.

LESSON 8

---

WebMasters was created and is taught by Dr. Dan Lineberger , WebMaster of Aggie Horticulture, Department of Horticultural Sciences, Texas A&M University, College Station, Texas 77843.