Image Maps

Using an image as a hyperlink is easy: Instead of text, nest an img element within an a element.

An Image Used As A Hyperlink
(a Element In Bold, img Element Underlined)

<p><a href="http://validator.w3.org"><img src="http://validator.w3.org/images/valid_icons/valid-html401.png" alt="Valid HTML 4.01"></a></p>

If used in a webpage, clicking on that particular Valid HTML 4.01 icon will take you to the W3C HTML valdiator. Making an image a hyperlink really is that simple.

Making only part of an image a hyperlink is a bit trickier, and requires the use of something called an image map.

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 iline 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. Like the id attribute, this must have a unique value amongst name attributes, although an id attribute may have an identical value. In other words, the following is perfectly valid:

<map id="Image-Map" name="Image-Map">

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.

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.
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:

  1. The x-coördinate (horizonatal) of the center of the circle
  2. The y-coördinate (vertical) of the center of the circle
  3. The radius (distance from the center to the edge) of the circle
rect

You need 4 numbers:

  1. The x-coördinate (horizonatal) of the left edge
  2. The y-coördinate (vertical) of the top edge
  3. The x-coördinate (horizonatal) of the right edge
  4. 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 x-y coördinates 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.

Modifying The Image Element

To associate an img element with a map element, simply include the usemap attribute 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 Example

An image map with a green square, blue triangle, and red circle
The Code Of The Above Image And Associated Map
(Square In Dark Green, Triangle In Dark Blue, Circle In Dark Red)

<p>In the image map below, clicking on the green square will take you to the <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="HyperText Markup Language">HTML</abbr> validator; the blue triangle to the <abbr title="HyperText Markup Language">HTML</abbr> 4.01 specification; and the red circle to the <abbr title="World Wide Web Consortium">W3C</abbr> homepage. The <code class="att_name">title</code> attributes cause tooltips to appear when I hover the mouse cursor over each area, which is handy for figuring out what shape leads where.</p>
<div>
<img id="Mapped_Image" src="../../image.PNG" alt="Image Map" usemap="#Image_Map">
<map id="Image_Map" name="Image_Map">

<area
alt="W3C Validator"
shape="rect"
coords="16,8 69,56"
href="http://validator.w3.org"
tabindex="1"
title="W3C Validator"
>


<area
alt="HTML 4.01 Specification"
shape="poly"
coords="118,22 118,89 185,89 118,22"
href="http://www.w3.org/TR/html401/"
tabindex="2"
title="HTML 4.01 Specification"
>


<area
alt="W3C Homepage"
shape="circle"
coords="72,155 36"
href="http://www.w3.org"
tabindex="3"
title="W3C Homepage"
>

</map>
</div>

Yes, it is perfectly acceptable to space multiple attributes out like I did above to make them more readable.

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 then 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. But there is a way around this: Instead of using area elements inside the map element, use a list of a elements (an unordered list is probably best).

The result is this:

An image map with a green square, blue triangle, and red circle

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 Dark Green)

<map id="Image_Map" name="Image_Map">
<ul>

<li><a
shape="rect"
coords="16,8 69,56"
href="http://validator.w3.org"
tabindex="1"
title="W3C Validator"
>W3C Validator</a></li>

<!-- Replace other area elements in a similar manner -->
</ul>
</map>

About the only drawback to this is that the rendering of the tabindex attribute becomes problematic in some browsers.