Images

Most of the material about images is covered in the tutorial at http://catcode.com/imgguide/. Please read that tutorial before continuing.

Making Images Clickable

To make an image clickable, just enclose it in an <a> element. Here is an example of the icon for the W3C linking to the W3C home page.

book with W3C on cover

And here is the markup:

<a href="http://w3.org/"><img src="screenshots/w3book.png"
    alt="book with W3C on cover" width="49" height="61" /></a>

You can also make a small “thumbnail” picture link to a larger version. (Click the picture; you will see a larger version.)

white kitten licking its paw

And here is the markup:

<a href="screenshots/marco.jpg"><img src="screenshots/marco_th.jpg"
  alt="white kitten licking its paw"
  width="199" height="150"/></a>

ImageMaps

Sometimes you to use an image for navigation and have different parts of the image go to different locations. Move your mouse around the image below and look in the status bar at the bottom of the browser window to see where a click will lead you:

Image map with four buttons
Linux information Free office suite News for nerds - stuff that matters Connect your digital camera to Linux

This is called an imagemap, because it maps sections of your image to different URLS. Setting up an imagemap by hand is a multi-step process.

Create a <map> element

All of the information about the imagemap will be contained within a <map> element. Put the tag into your document (it can go anywhere; usually imagemaps go at the bottom of the document), and think up a name for your imagemap. This name will be the value of the map’s name attribute. In this example, we'll call our imagemap buttonmap. In XHTML, you must also have an id attribute, and it must have the same value as the name attribute.

<map name="buttonmap" id="buttonmap">
	<!-- imagemap info here -->
</map>

Identify the coordinates of the active sections of the image

Now figure out which areas of the image will be clickable, and where they are located within the image. If you open the image in a program like Adobe Photoshop on Windows or the GNU Image Manipulation Program on Linux, you can move a pointer around the image and see the cursor’s coordinates. Coordinates are a pair of numbers; the first number tells how many pixels from the left the cursor is, and the second tells how many pixels down from the top the cursor is. You can see the coordinates of the arrow in the lower left of this picture:

cursor and coordinate display

Make a table of the upper left and lower right coordinates of the active areas of your image, and where they should go when clicked:

Coordinates Destination
Upper leftLower right
7, 7103, 83 http://www.linux.org/
139, 7223, 83 http://www.openoffice.org/
62, 88145, 150 http://slashdot.org/
207, 88297, 150 http://www.gphoto.org/

Create <area> elements

Each of these table entries will become a rectangular area. You use the <area> element with an attribute of shape="rect" and a coords="..." attribute to describe the area. You may also have an alt="..." attribute to make the information accessible to blind users. You may also use a title="..." attribute to create a tooltip.

Here is what the imagemap will look like once you have entered all the information. When you enter the coordinates, you may not put blanks after the commmas.

<map name="buttonmap" id="buttonmap">
    <area shape="rect" coords="7,8,103,83" href="http://www.linux.org/"
        alt="Linux information" title="Linux information" />
    <area shape="rect" coords="139,8,223,83" href="http://www.openoffice.org/"
        alt="Free office suite" title="Free office suite" />
    <area shape="rect" coords="62,88,145,150" href="http://slashdot.org/"
        alt="News for nerds - stuff that matters"
        title="News for nerds - stuff that matters" />
    <area shape="rect" coords="207,88,297,150" href="http://www.gphoto.org/"
        alt="Connect your digital camera to Linux"
        title="Connect your digital camera to Linux" />
</map>

The shape attribute tells what shape the area has; rect is obviously the easiest. There are other possibilities.

Connect your image to the imagemap

Add a usemap attribute to your <img> element; its value will be the URL of the imagemap. Since the imagemap is in the same file as the image, you will use a # in the URL:

<img src="screenshots/imagemap.png" usemap="#buttonmap"
	alt="Image map with four buttons"
	width="311" height="157"  border="0" />

Imagemap shapes

Here is a summary of all the values for the shape attribute inside of an <area>:

shape= coords value example
shape="rect" Coordinates of upper left and lower right of a rectangular area, separated by commas coords="7,7,25,82"
shape="circle" Coordinates of the center of a circular area, followed by the radius of the area. The example shows a 20-pixel circular area centered at coordinates (60, 40). coords="60,40,20"
shape="poly" An arbitrary polygon; you list the coordinates of each vertex of the polygon. The example shows a triangular area with vertices at (10,10), (30,30), and (50,10) coords="10,10,30,30,50,10"
shape="default" No coordinates needed; this describes a click anywhere in the image that is not occupied by other <area> specifications. N/A