Most of the material about images is covered in the tutorial
Please read that tutorial before continuing.
To make an image clickable, just enclose it in an
Here is an example of the icon for the W3C linking to the W3C home page.
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.)
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>
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:
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.
All of the information about the imagemap will be contained within
<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
In this example, we'll call our
buttonmap. In XHTML, you must also have
id attribute, and it must have the same value as the
<map name="buttonmap" id="buttonmap"> <!-- imagemap info here --> </map>
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:
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:
|Upper left||Lower right|
|7, 7||103, 83|
|139, 7||223, 83|
|62, 88||145, 150|
|207, 88||297, 150|
Each of these table entries will become a rectangular area.
You use the
<area> element with an
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>
shape attribute tells what shape the area has;
rect is obviously the easiest.
There are other possibilities.
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" />
Here is a
summary of all the values for the
attribute inside of an
||Coordinates of upper left and lower right of a rectangular area, separated by commas||
||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).||
||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)||
||No coordinates needed; this describes a click anywhere in
the image that is not occupied by other