ImageMaps

All images in HTML are rectangles, although portions of the images' borders may be transparent, giving them the illusion of non-rectangular shapes. Likewise, if you make an image into a hyperlink (by nesting   tags) the clickable area (a.k.a. "hot zone") will be the rectangle around the image. That is, if you click anywhere inside that rectangle, it will all do the same thing.

However, there are occasions when you might want to have a complex graphic that has several "hot zones" in it, such as a map. Then depending on where in the graphic you click, you might get a different result. This can be done with an "image map."

An image map is set up with a set of tags on the page that define areas of an image, but which are invisible on the page. They consist of a ... tag containing one or more tags. The tag has one attribute - the name of this map, which will be used to link this map to an image. The tags have the same attributes as the venerable  tag -- href, alt, onmouseover, onmouseout, onclick, etc, as well as two others: "shape" and "coords." Each tag refers to one hot zone on the graphic.

The "shape" attribute has three possible values, "rect," "circle," or "poly." The shape determines the type of shape of one of the hot zones. The "coords" attribute consists of a list of numbers, separated by commas, and contained in a set of quotes. Depending on what type of shape you pick, the coords mean different things:
 * Shape || Coordinates || Meaning ||
 * shape="circle" || coords="x,y,r" || "x,y" are the center of the circle, measured from the top left corner of the image, and "r" is the radius. ||
 * shape="rect" || coords="x1,y1,y2,y2" || "x1,y1" are the coordinates of the upper-left corner of the box, and "x2, y2" ar the coordinates of the lower-right corner of the box. All coordinates measured from the upper-left corner. ||
 * shape="poly" || coords="x1,y1,x2,y2,x3,y3..." || Each of the (x,y) pairs represents a point of a polygon, which will eventually return to the starting point. All coordinates measured from the upper-left corner. ||
 * shape="default" || none || The rest of the graphic, not taken up by other hot zones ||

Here is a fictional example with a page that has 4 hot zones, plus a hot zone for the background image. code format="html4strict"       code The only visible portion of this on the page will be the tag and its contents. Notice the "usemap" attribute in the tag - this is what links this graphic to the map. The value of the "usemap" attribute is a pound sign ("#"), followed by the name of the map. (The pound sign indicates that this is a portion of this page.)

Each of the hot zones is linked to a separate page, via an "href" attribute. Each tag can also have rollover tags, such as "onmouseover," "onmouseout," and "onclick," as they did in the  tags in the Rollovers section of this wiki.

Assistive applications.
Calculating the coordinates for a set of polygons (or even circles and rects) can be a bit of a pain. Fortunately, there are some programs that will help you do this for you. In class, we are using a shareware program we purchased for MacOSX, called "[|Taco HTML Edit.]" (I mistakenly said this was freeware in class.) If you have a pre-Vista Windows machine, you might consider a freeware program called "[|Imagemapic 2.0]." I have not tried this program, myself, but it is available from a pretty reliable software download service, called VersionTracker. If you have Vista (or have an earlier version of Windows and don't like Imagemapic) here is a link from VersionTracker for a $20 shareware program called "[|Visual Imagemapper 4.0]."

If you want to "rough it in style," here is another option for the Mac side: a freeware program called "[|FreeRuler]." This superimposes a ruler on your screen (which you can move to the corner of your graphic). It will tell you the location of your mouse in inches, centimeters, pixels or whatever units you like. It is rather handy for many situations!