Clickable Image Maps
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 using WebMap to map the cursor coordinates on the image and write the map file, and how to serve both "server-side" maps via a cgi script and "client-side" maps using an advanced browswer (Netscape or Internet Explorer).
- Making Clickable Imagemaps
- A suitable utility (such as WebMap) 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).
- 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). 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 text file of area coordinates is exported as a text file (usually named xxx.gif.map).
- One of the most confusing steps in preparing a clickable map, is writing the reference links properly in relation to the location of the imagemap server.
- 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). Text areas on a map can be given links in the same manner.
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.
Heretofore, the indication on your browser for an image that was clickable was the characteristic colored border. Note that this border is frequently not displayed in most modern imagemaps. An indicator of a clickable map in the newer versions of Netscape is that the cursor position is displayed in the footer bar when the cursor is moved over an imagemap.
Server-side imagemaps must be written with a reference to the cgi script on the serving computer. Using ImageMap (for the Mac), this requires root folder access to the server, because the imagemap files must be placed in the imagemap folder. The names of the maps must be defined in the imagemap.config file.
The procedure is less complicated on TAM2000; both the gif file and the gif.map text file can be placed in the user's directory. The syntax of the reference links must include the cgi directory of TAM2000 as indicated in the illustration.
- 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.
There are two ways to serve client-side maps. The most widely supported uses the <MAP> definition tag and the USEMAP command. The other uses the <FIG SRC> tag, but it is not supported by current versions of Netscape and Internet Explorer.
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 TAM2000.
- Client-Side Version of Wildflowers in bloom site.
- Server-Side Imagemap Version of Wildflowers in bloom site served by Aggie Horticulture.
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.
| WebMasters Home | Aggie Horticulture |