Image Mapping

HTML 3.2: Here's Wilbur!, created in 1997 by Eric Meyer, is maintained on this server for historical reference. While much of this information is still relevant, it is important to remember that it was written for HTML 3.2. The more current versions of HTML and XHTML in use today have different requirements. To learn more, you may also wish to review our Web Development blog entries on HTML/XHTML and Cascading Style Sheets.

One topic I didn't tackle in my previous tutorials was that of image mapping; that is, allowing the user to click on an image and then have the browser go to different pages depending on where the user had clicked on the image. This is often used for button panels and toolbars, such as those at the top and bottom of the pages of this tutorial.

I avoided this topic for a variety of reasons, but the main one was that back then, image mapping could only be done with the help of a server-side program. This made things somewhat complicated-- and making it worse, there were a number of mapping programs, each with its own file format. Rather than take on the entire tangled mess and add a chapter or two to either of the previous tutorials, I decided to wait until the time was right.

Well, that time is now-- because you can map images without the need for a server-side program. That's right. Client-side image mapping is here! You can define image maps within your HTML documents, with no more messing about with server-side applications and configuration files.

But First...

In order to map an image, you'll need to use a new attribute to the IMG tag: usemap. The value of usemap is the name of a map definition (which we'll get to in the next section). For example, assume that you have a map named "homepagemap" which is imbedded in your home page, and you want to apply it to your home page's main image (mainpage.gif). The markup would look something like:

   <IMG SRC="mainpage.gif" usemap="#homepagemap">

I realize that this seems a bit confusing at the moment, but keep going. If necessary, you can refer back to this point after you've finished the chapter.

MAP

So how does it work? Well, the basic structure of an image map is the container (<MAP>...</MAP>). The MAP tag has but one attribute: name. You use this attribute to give a name to your map definition, oddly enough. The name can be just about anything you want, from "homepagemap" to "map2" to "grover."

   <MAP name="map2">
   .....
   </MAP>

The MAP container needs something to go inside it, of course. After all, what good is it to name a map if it doesn't have any regions defined?

AREA

Active regions-- that is, parts of an image which the user can click on and expect something to happen-- are defined using the AREA tag. The AREA tag is empty, so no close tag is permitted.

AREA has five possible attributes: shape, coords, href, nohref, and alt. I'll take each in turn, although I expect you've figured out some of them already.

shape is used to specify what kind of geometric shape a region is to be. There are three possibilities: rect, used to define a rectangle; circle, which should be obvious; and poly, which permits an arbitrary polygon. The number of points in this polygon are theoretically infinite, although I wouldn't push your luck: try to keep the number of points under thirty.

In all these cases, the actual placement and size of the shape is determined by the coords attribute. The basic values for coords are x and y, where x and y are usually numbers measured in pixels from the top left corner of the graphic. However, if the numbers for x or y are followed by a percent sign, then they should be interpreted as percentages of the graphic's height and width. These can be mixed, so that pixel measurements and percentages of the image's size can be used in the same coords statement.

Not all browsers will interpret the percentages correctly, so make sure you test this in as many browsers as possible before using it on a Web page. In those browsers which don't support percentages, the numbers are usually interpreted as pixel measurements, so coords="50%,25%,25%" would be treated as coords=50,25,25.

The actual value of coords is totally dependent on the shape in question. Here is a summary, to be followed by detailed examples:

rect = x₁ , y₁ , x₂ , y₂

x₁ and y₁ are the coordinates of the upper left corner of the rectangle; x₂ and y₂ are the coordinates of the lower right corner. Therefore, a rectangle which goes from 10,5 to 20,25 would have the attribute coords="10,5,20,25". A rectangle which defines the upper-left quarter of an image might use coords="0,0,50%,50%".

circle = x_c , y_c , radius

x_c and y_c are the coordinates of the center of the circle, and radius is the circle's radius. A circle centered at 200,50 with a radius of 25 would have the attribute coords="200,50,25"; one centered at the image's center and having a diameter of half the image would be defined by coords="50%,50%,25%".

poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

The various x-y pairs define vertices (points) of the polygon, with a "line" being drawn from one point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels across at its widest points would have the attribute coords="20,20,40,40,20,60,0,40". A "line" is always drawn from the coordinates of the last point to the coordinates of the first point in order to close the polygon.

Here are some example AREAs and their corresponding coords:

   <AREA shape="rect" coords="10,5,20,25">
   <AREA shape="poly" coords="25,5,45,25,25,65,5,25">
   <AREA shape="circle" coords="25,25,20">
         
 

Well, now that we've figured out how to define regions, it's about time we did something about making them useful. It's pretty easy, really-- all you need to do is define a destination for each AREA tag. This is done using the href attribute, and the value of href is a URL; for example, href="http://www.mysite.org/".

Now that we have the pieces in place for a complete AREA tag, let's put them together. Let's say I want a square which starts at the upper left corner of the image, is ten pixels on a side, and points to the URL page17.html. The necessary AREA tag would be:

   <AREA shape="rect" coords="0,0,10,10" href="page17.html">

The same rules about using URLs in anchors are in force using the AREA tag. You can use absolute or relative URLs, as well as references to named anchors within documents.

So what's nohref for? As you might suspect, it's used to indicate that a region doesn't do anything when clicked upon-- let's call them "inactive regions." This sounds like yet another useless concept, but it isn't. In the first place, you can use this to define regions which will be assigned targets later; in effect, placeholders for the author.

The more interesting use is that you can "cut out" sections of active regions. Assume that you want to create a clickable ring, where the center of the ring (the hole in the middle) is inactive. You could do this as a really complicated polygon, but a much easier way is something like this:

   <AREA shape="circle" coords="50,50,20" nohref>
   <AREA shape="circle" coords="50,50,40" href="page4.html">

The reddish area in Figure 3.2 represents the active region of the image, based on the AREA statements above. Gray represents "dead" space, so nothing will happen if the user clicks there.

This leaves only the question: Why was the inactive region first, instead of second? The HTML specification is quite clear that in cases of overlapping regions, the first AREA tag in the map definition takes precedence over later tags.

This precedence is true in all cases, so in the following circumstance:

   <AREA shape="rect" coords="0,0,30,30" href="page1.html">
   <AREA shape="rect" coords="20,20,50,50" href="page2.html">

...the overlap between 20,20 and 30,30 will be mapped to page1.html, not page2.html. The dark blue area in Figure 3.3 is the first AREA statement above; the green, the second. Note the way in which the blue region "overlaps" the green.

The final advantage to client-side image mapping is that it allows for much better text-based browser support. Since the hrefs of the various regions are defined in the document, a text-only browser like Lynx can create a list of hyperlinks in the place of the image, which it obviously can't display. To account for this potential capability, the AREA tag has alt as an attribute.

The alt attribute is used in AREA tags exactly as it is with the IMG tag. You can define a text label for the region defined in an AREA tag just as you can provide text labels for the image referred to in an IMG tag.

   <AREA shape="rect" coords="0,0,30,30" href="home.html" alt="Home Page">
   <AREA shape="rect" coords="31,0,60,30" href="help.html" alt="Help!">

The HTML 3.2 specification has this to say about using the alt attribute with AREA tags:

Authors are strongly recommended to provide meaningful ALT attributes to support interoperability with speech-based or text-only browsers.

Take that for what it's worth (which is quite a lot, in my opinion).

Chapter 3 Quiz
Next-- Chapter 4: Visual Effects
Previous -- Chapter 2: Image Attributes
Table of Contents
Tutorial Glossary
Tutorial Index
The HTML Laboratory
Tutorial Feedback