Image Maps

Image Map Elements

The image map requires 3 types of elements:

the image map element,
the map area element,
and the image element (discussed in the chapter on inline elements) with the addition of a special attribute.

The core and language attributes apply to all of these.

The Image Map Element

Element Name: map

This element contains the areas of the image map. It is a body element, and is one of the few that isn't actually a block or inline element. In fact, you don't see it at all (although it does cause a line break), only its effects.

Required Attributes:

name

The name attribute identifies the map. This should have a unique value amongst name attributes, although an id attribute may have an identical value. In other words, the following is perfectly valid:

The map Start Tag With id and name Attributes.

This is actually a recommended method, as some browsers associate an img element with a map element using the map element's id attribute rather than the name attribute. Why this is, I don't know.

The Map Area Element

Element Name: area

The area element is used to associate a URI with a specific area of the image. It is an empty element.

Required Attributes:

alt: The alt attribute contains text. It has much the same role as the alt attribute of an img element.

Implied Attributes:

href

The href attribute contains a URI. It has much the same role as the href attribute of an a element.

nohref

This is to say This area is not a link. It is a boolean attribute, having the value nohref.

shape

The shape attribute is an enumerated attribute. Your choices are:

default: This specifies the entire image.
circle: This specifies a circular area (sorry, no ellipses).
rect: This specifies a rectangular area.
poly: This is short for polygon and specifies an area best described as none of the above.

coords

Short for coördinates, the coords attribute tells the browser where the shape is. While you technically can enter any data without raising a validator error, the only characters that you should use are numbers, commas, and spaces.

The coords attribute is interpreted by the browser depending on the value of the shape attribute. The numbers needed are listed in occurance from left to right and refer to the number of pixels.

circle

You need 3 numbers:

The x-coördinate (horizontal) of the center of the circle
The y-coördinate (vertical) of the center of the circle
The radius (distance from the center to the edge) of the circle

rect

You need 4 numbers:

The x-coördinate (horizontal) of the left edge
The y-coördinate (vertical) of the top edge
The x-coördinate (horizontal) of the right edge
The y-coördinate (vertical) of the bottom edge

Another way to think of this is the coördinates of the upper-left corner and the coördinates of the lower-right corner.

poly

This is more compicated than the other two. Essentially, you use a series of x-y coördinate pairs to outline the shape you want. The browser draws a straight line from one coördinate to the next, and the last coördinate should be exactly the same as the first.

A good way to keep track of these numbers is to use a comma between x- and y- coördinates so that they're in pairs.

tabindex

The tabindex attribute works exactly the same way as it does when used in a a element, but is actually more useful here, since it may not be obvious where a hyperlink actually is.

For more complex geometric shapes, you have the option of using multiple area elements which point to the same URI and which may overlap to create a single region, or you may use the poly value of the shape attribute, or a mixture of these.

Modifying The Image Element

To associate an img element with a map element, simply include the usemap attribute—which I introduced back in Inline Elements—with the img element you want to associate with the image map. The contents of the usemap attribute should match the contents of the name attribute of the desired map element, except with a hash mark in front.

In other words, if the value of the name attribute of the image map is Image_Map, the value of the img element's usemap attribute should be #Image_Map.

One warning: While more than one image can use the same map, don't try to associate more than one map with the same image. The most likely result is that the image won't use any of them.

Image Map Drawbacks

While image maps give an entertaining option to website design, they hold some drawbacks.

One drawback is determining where to set the areas, which can take some experimentation (particularly in the case of polygons).

Another is if the image is set at a different size than it used to be (which can happen), the browser will not reinterpret the coördinates; you have to recode them yourself.

If The Image Doesn't Appear

Possibly the most serious drawback is if the image does not appear at all, the image map is useless. One way around this is, instead of using area elements inside the map element, using a list of a elements.

The result is this:

An image map with a green square, blue triangle, and red circle as links along with a list of links

The changes necessary are minor. The only area-specific attribute explained in this chapter that may not be used in an a element is alt—but the a element contains text anyway.

The resulting code would look like this (I will truncate it to just the map and a single area-to-a replacement for clarity's sake):

An Image Map Using a List Of Links Rather Than Areas

(Square In Bold)

<ul>

<li><a

shape="rect"

coords="16,8 69,56"

href="http://validator.w3.org"

tabindex="1"

title="W3C Validator"

>W3C Validator</a></li>

</ul>

</map>

This comes with a major drawback of its own, though: some browsers will not treat this as an image map, and I'm not just picking on Internet Explorer. Google Chrome and Safari are others that you will have this problem with. Furthermore, jumping from one link to the next using the tab key becomes a problem in Firefox.

About the best way to get around these limitations is to have a map and a separate list of links—which takes more coding.

Note: A bit of an accessibility tip here: The alt attribute of the area elements is so that vision-impaired people can tell (via a tactile device or screen reader) where that link is going to go. For best results, have the map directly follow the image, so that those using a screen reader can put those links in proper context.

Server Side Image Maps

I can tell you the exact moment I started researching these things: when I started to write this section. To use a server-side image map, the img element must be nested in a a element—in other words, the full image must be a link. Secondly, the img element must have the boolean attribute ismap, mentioned in Inline Elements.

An Image Using A Server-Side Image Map
<a href="./image_map.html"><img id="Mapped_Image" src="./image.PNG" alt="Image Map" ismap="ismap"></a>

What this will do is send the following URI to the server: image_map.html?x,y. The values x and y represent the coördinates of the pixel in the image you clicked on. For example, if you clicked on the very top left, the URI would actually be image_map.html?0,0. A program on the server would then interpret those coördinates to decide where the link should go. This is an accessibility nightmare, and people who use a website generally like an idea of where a mouse click is going to take them (which server-side image maps generally don't give them).

Since I'm not going to get into server-side scripting (beyond a brief description in Server-Side Scripting), server-side image maps are pretty rare anyways and whatever you can do with a server-side image map you can do with a client-side one, this is as much as I'll tell you about them.

Image Maps

Image Map Elements

The Image Map Element

Required Attributes:

The Map Area Element

Required Attributes:

Implied Attributes:

Modifying The Image Element

Image Map Example

Image Map Drawbacks

If The Image Doesn't Appear

Server Side Image Maps