In the (X)HTML document that contains the image, type <map.
Type name="label" id="label">, where label is the name of the map.
Type <area to define the first clickable area.
Type alt="info", where info describes what will happen when the visitor clicks.
Type shape="type", where type represents the area's shape. Use rect for a rectangle, circle for a circle, and poly for an irregular shape.
For a rectangle, type coords="x1, y1, x2, y2"
, where x1
, and y2
represent the upper-left and lower-right corners of the rectangle, as obtained on page 116
, and shown in Figure 6.28
For a circle, type coords="x, y, r"
represent the center of the circle and r
is the radius.
For a polygon, type coords="x1, y1, x2, y2"
(and so on), giving the x
coordinates of each point on the polygon.
, where url.html
is the address of the page that should appear when the user clicks in this area.
Or type nohref
if a click in this area should have no result. For XHTML add ="nohref"
If desired, type target="name"
, where name
is the name of the window where the page should appear (see page 108)
Figure 6.30. When your users point at one of the defined areas, the destination URL appears in the status bar at the bottom of the window.
If desired, add a keyboard shortcut by typing accesskey="x" (see page 112)
Type /> to complete the clickable area.
Repeat steps 310 for each area.
Type </map> to complete the map.
Type <img src="image.gif"
, where image.gif
is the name of the image to be used as an image map.
Figure 6.31. And if a user clicks the link, the browser immediately displays the corresponding page.
Add image attributes, including alt.
Type usemap="#label", where label is the map name defined in step 2.
Type the final /> for the image.