Image Maps

  1. Server-side Image Maps
  2. Client-side Image Maps
  3. Further Reading and References

We have seen how you can use an image in conjunction with the anchor tag to create an image that is hot, or clickable. Sometimes you will want to make more than one part of an image clickable. In the past you would have had to cut the image up into small pieces, put an anchor tag around each piece, then put it all back together again using an HTML layout table. Luckily image maps allow us to achieve this in a much simpler fashion.

An image map is a single image containing more than one hot spot. Consider this:

Click around on the image to see if you can find the birds listed to the left


Quail, California

Magpie, Black-billed

Pheasant, Ring-necked

Swallow, Barn

Kestrel, America

Shrike, Northern

Jay, Blue

Kingbird, Western

Cardinal, Northern

In this example when you click on a bird, the browser displays the name of the bird. Image maps used on the World Wide Web are typically used for navigation where each hot spot on the image map takes you to a different Web page.

Image maps come in two flavors, client-side and server-side. The difference between the two is how they get their information. We will look at both because you can take advantage of a server-side image map to help you create your client-side image map.

Server-side Image Maps

Image maps that run on the server-side depend on a server-side language like ASP, PHP, or PERL to receive the information, interpret it, and then make an appropriate decision based upon where the image was clicked.

This works because when you set up an image to be used with a server-side image map the Web browser will automatically send along where it was that you clicked the image. In this next example notice how there are numbers appended to the end of the URL (look down at the browser's status bar). Move the mouse around the image and take note of how the numbers change as you move.

<a href="#">
<img src="images/vader_big.jpg" id="vader" ismap="ismap" style="border: none"/>
</a>

The number you are seeing are the coordinates of the current mouse location. The image and anchor tags we are using here are the same ones you would use to make any image a link, what is different here is the ISMAP attribute. The ISMAP attribute tells the browser that we intend to use this image as a server-side image map so that it will know to record the current mouse location and send those numbers along when we click the image.

When the server sees the numbers it will look to a special script that was previously written and decide what should happen based on those numbers. For example, perhaps we have a page set up that describes Darth Vader's helmet in detail. In our server side script we would have language that would say something like the following:

If the first number is from 40 to 160
And the second number is from 5 to 125
Then go to head. html

So what about the control panel on Vader's chest? What if we had another page that described the control panel in detail, could you define the hot spot for that page? Can you write the pseudo code for that region as in the example above? Go ahead and give it a try:

If the first number is from to And the second number is from to Then go to panel.html

So you can see how the server-side script can take appropriate action based on the coordinates that were passed in from the image map. In this course you won't be making a server side image map but you can use one to help you build your client-side image map.

Client-side Image Maps

Client-side image maps are images that set up different regions of a single image and make them clickable. The browser interprets the image map based on the XHTML tags you use to define the "hot spots," or areas, on the image.

To set up a client-side image map, get an image that you want to use as a map. Then, in the XHTML document where you want the image to appear, enter the following XHTML tag:

<a href="#"><img src="images/vader_big.jpg" id="vader" ismap="ismap" style="border: none"/></a>

You might notice right off that this is the same way that we set up a server-side image map. This is because you will use this image to get all of your needed coordinates before setting up your client-side map.

For client-side image maps you can define three types of areas:

AREA with SHAPE and COORDS

To construct each of these area types we will need to use the AREA element with the SHAPE and COORDS attributes. SHAPE defines the type of area. We then use the COORDS attribute in AREA to define the pixel of the image that constitute the area. AREA is an inline-level element so it must self-terminate.

The Rectangle

Rectangular areas of an image map are the easiest to construct and are defined by two sets of coordinates the top, left and the bottom, right in that order. Consider this:

>
   <area shape="rect" coords="35,8 160,120" alt="helmet" href="#" />

To set up a rectangular area use the shape of rect then use the mouse to get the coordinates (coords). First hover over the top, left corner of the area you intend to define and take note of the numbers, that will be your first set of coordinates. Now, hover over the bottom, right corner of the area and make note of the numbers, that will be your second set of coordinates. Rectangles are great for rectangular areas but as you can see when they are used to define irregular shaped regions they include unwanted data or exclude wanted data.

The Circle

The coordinates for a circle represent the center of the circle and the radius of the circle in that order. Consider this:

   <area shape="circle" coords="90,75 58" alt="helmet" href="#" />

To set up a circular area use the shape of circle then use the mouse to get the coordinates. The first set of coordinates are the center of the circle, the second coordinate is the measurement of the radius or the distance form the center of the circle to the edge of the circle. The easiest way to get this number is to hover over the edge of the circle on the same axis as the first set of coordinates and subtract the two differing numbers. Circles are a bit harder to define but are great for defining circular objects but as you can see if you use them for rectangular or irregular objects they will include unwanted data or exclude wanted data.

The Polygon

To indicate non-rectangular and non-circular shapes use the polygon.. Each coordinate set is a vertex of the polygon, and up to 100 vertices can be defined. Consider this:

   <area shape="poly" coords="58,15 90,1 124,8 160,105 95,130 37,117" alt="helmet" href="#" />

To set up a polygon area use the shape of poly then use the mouse to get the coordinates. Plot each set of coordinates in a clockwise fashion until you have mapped out the entire area. While polygons are the most accurate areas they are the most difficult to set up.

Putting It All Together

With all of the AREA elelment mapped out using SHAPE and COORDS attributes you have everything you need to actually create the client side image map. In order to actually create an image map, however, we need to add two things: first, we need the IMG itself, and we need that IMG to refer to our image map. Second, we need each of our AREA elements inside of a parent MAP element. MAP is the XHTML element that defines as many areas as we wish to have. Consider this:

Darth Vader left eye helmet control panel
<img src="images/vader_big.jpg" id="vader" usemap="#vader_map" alt="Darth Vader" />
<map id="vader_map">
   <area shape="circle" coords="110,70 9" alt="left eye" href="#" />
   <area shape="poly" coords="58,15 90,1 124,8 160,105 95,130 37,117" alt="helmet" href="#" />
   <area shape="rect" coords="40,221 101,282" alt="control panel" href="#" />
</map>

We see here that to set up an image map you must first have an IMG set up with the USEMAP attribute defined. The USEMAP attribute contains the location of the map we would like to use. It can be a URL, but we must link to a NAME or ID within the target URL using #.

We then setup the image map itself using the MAP element. I identify it using the ID attribute so the IMG has an identifiable map to call upon.

Within the map I have setup each area that defines a hot spot using either the rect, circle or poly shapes and their associated coordinates. The browser evaluates areas based on the order they appear in the map. So, if you have a region within a region, then the smaller region would have to appear first in the map definition to be expressed, that is why I put the definition for the eye area before the definition for Vader's head.

Image maps can be handy but with CSS you can accomplish the same thing by absolutely positioning transparent page divisions DIV over the areas of the image you want to be clickable. Image maps gain the advantage when you want to specify the exact shape of the area you wish to define. Using CSS to accomplish this is only slightly better than slicing and wrapping images because you are still limited to rectangular areas. While the CSS model offers the best means for creating functional and fully accessible Web sites the client-side image map is still much more functional so you run into a situation where you have to make a trade off between functionality and accessibility.

Further Reading and References