Revised: February 11, 2003Imagemaps
With a standard clickable image, clicking anywhere on the image takes to to the same location. Imagemaps are a technique by which a clickable image is divided into different regions with a possibly different link for each region. There are two parts to an imagemap, one using the <MAP> tag and the other the <IMG> tag. The <MAP> tag looks like this:<MAP NAME="bill">
<AREA SHAPE="CIRCLE" COORDS="x,y,radius" HREF= "...">
<AREA SHAPE="RECT" COORDS = "x1,y1, x2, y2" HREF= "...">
<AREA SHAPE="POLYGON" COORDS = "x1, y1, x2, y2, ..." HREF="...">
</MAP>All coordinates are measured in pixels relative to the upper left hand corner of the image. The CIRCLE is specified by 3 numbers: the x,y coordinates of the center and the radius. A RECT (rectangle) is specified by the x,y coordinates of the upper left and lower right corner. A POLYGON is specified by the x,y coordinates of the vertices.
These coordinates can be obtained in most graphic editing programs, or by using shareware programs such as MAPEDIT for the PC or WebMap for the MAC. Alternatively, one could determine the size of the image by displaying the image in a browser, right clicking on the image, and selecting properties. One could then print the image and with a ruler estimate the coordinates of the regions you are interested in.
Although one is constrained to a single <ALT> tag for the entire image, one can use the ALT or TITLE attribute within each <AREA> tag so that the effect is much the same as if one could specify a separate <ALT> tag for each region.
The second part of the imagemap is to link the <MAP> you have specified with the image. Normally to make an image into a link, one would write <A HREF="dest.html"><IMG SRC="cow.gif"></A>. This displays cow.gif and clicking on it takes you to dest.html. If one had defined an image map for cow.gif, the clickable image would be specified as follows:
<IMG SRC="cow.gif" USEMAP="#bill" border=0>
The image map to use with cow.gif is specified by the name, preceded by a pound sign. Note that one does not surround the <IMG> tag with the <A> tag to create the link. Instead, the fact that it is a link and the destination if one clicks it, is specified in the <MAP> tag.
Some examples of imagemaps in student projects: Gita Sehgal http://www.geocities.com/anjali_2000 (initial page and car page) and Isabel Fernandez www.nv2.cc.va.us/home/ifernandez/finalproject (map of Puerto Rico)
Some commercial and nonprofit examples: Alamo Rental Car Site (image in top frame) www.alamo.com
Graphic slicing: If the regions one specifies are rectangular, an alternative to imagemaps is to slice the image into parts and combine them seamlessly with a table. This is more efficient than an imagemap if one is doing an image rollover (where the image changes to another image when the cursor is over the image) because the "on" and "off" versions of the images will only be the sizes of the parts rather than the whole, resulting in faster downloads. To get the table to look like the original image, specify <table border=0 cellspacing=0 cellpadding=0> and specify a width that is equal to the sum of the widths of the images. Each <td> tag should specify a width that is equal to the width specified in corresponding <img> tag. If this is not sufficient, other tricks may work: (1) specify the height of the table as the sum of the height attributes within each <img> tag and <td> tag; (2) do not leave any blank spaces between the <td></td> tag pairs; if you want to break a line, do it within a tag such as <img> or <a>.
Stanford Alumni Association www.stanfordalumni.org/erc/clubs/home.htmlComments to William Pegram, wpegram@nvcc.edu