Lesson 18: Images and Maps

Door to Garden the_garden.html

The photograph to the right has areas on it that act like links. Move the cursor over the image and find where the cursor changes shape to indicate that it is clickable. When you click on it, a new page will load. Click and then use the browser's back button to return to this page.

Any image can be given one or more areas that are part of an "image map". An image map is a collection of parts of an image that act like links. The image map consists of areas, each of which can be a circle, a rectangle, or a polygon. An area tag should contain at least four attributes: shape, coords, href, and alt. The alt attribute is required. The shape is one of "default", "rect", "circle", or "poly". The "default" value means that the entire image is clickable. The href value is the URL of the page to be loaded when the area is clicked. The coords value depends on the shape.

There are two area elements in the image to the right. One is a rectangle; the other a polygon. The rectangle is specified by its upper-left corner and its lower right corner. The (0,0) point is the upper-left corner of the image. The coordinates increase to the right and downward. The lower right corner of this image has coordinates (398,583).

A polygon is specified as a sequence of x,y coordinates. For example, 10,10, 10,20, 30,40, 60,25, 15,10 specifies a polygon whose vertices are at the points (10,10), (10,20), (30,40), (60,25), and (15,10). Look at the source code of this page to see what the polygon's coordinates are.