Image Maps

Sometimes, instead of using an entire image as a link, you might want to have specific parts of the image to act as links. You can do this using image maps.

How to Create an Image Map

The first step is to create an image map using the map element.

<map name="ImageMap">
</map>

The image map must have a name, so that we can tell the image element which map it should use. For now, the map is empty, but the next step is to define the specific areas within the image that we want to be clickable.

How to Create a Clickable Area Within an Image

As an example, suppose that we want to make the colored "@" symbol in our logo clickable, and have it link to our home page. Looking at the image, what we want is an area that is roughly a circle, centered on the middle symbol, and having a large enough radius to accommodate the entire "@" sign.

Shows the part of the image that will be clickable.

What we need to do is to find the coordinates of the center of the circle, and the length of the radius. Both are measured in pixels, and the coordinates are relative to the image itself (not the web page the image is placed on, so it doesn't matter where on the page the image is placed).

The easiest way to do this is to open the image in a graphics editing program such as GIMP, position the cursor at the appropriate point within the image, and let the program tell us the coordinates.

Shows how to determine the coordinates of the clickable area.

If you look at the image above, the small dashed circle represents the position of the cursor, which is approximately where we want the center of our clickable region. The numbers in the bottom left corner of the window (85,75) represent the coordinates of that position.

Now that we have the center, we can check the coordinates of a point at the edge of our clickable region in order to determine the radius. In our example, it works out to be 47 pixels.

Now that we have both of these numbers, we can create a clickable area within the image using the area element.

<map name="ImageMap">
  <area shape="circle" coords="85,75,47" href="link destination"
  target="_blank" alt="Alternate text for clickable area.">
</map>

The shape attribute specifies that the area is a circle, the coords are the ones we calculated above giving the x and y positions of the center and the radius, the href attribute is the same as in the anchor element and specifies the destination when the area is clicked, the target attribute can optionally be used to indicate that the link should open in a new window, and the alt attribute specifies alternate text for the clickable part of the image.

Other Shapes for Clickable Areas

If you don't want the clickable region to be a circle, you can use the shape attribute to specify other shapes. If you set this to "rect" then the area will be a rectangle. The coords attribute will contain four numbers - the x and y coordinates of the bottom-left corner and then the x and y coordinates of the top-right corner of the rectangle.

If you set the shape attribute to "poly", then the area will be a polygon, with as many sides as you wish. The coords attribute will contain the x and y coordinates of each point in the polygon.

Adding an Image Map to an Image

The last step is to add the image map to the image that you want the clickable region to appear in. This is done using the usemap attribute on the image element to specify the name of the image map, preceded by the "#" character.

<map name="ImageMap">
  <area shape="circle" coords="85,75,47" href="link destination"
  target="_blank" alt="Alternate text for clickable area.">
</map>
<img src="path to image" alt="Alternate text" usemap="#ImageMap">

<-- Previous Page

Bookmarks