FIGURE 7.22 getting the coordinates for a circle

FIGURE 7.23 getting the coordinates for a rectangle.

The value assigned to the name attribute is the name of this map definition. This is the name that will be used later to associated the clickable image with its corresponding coordinates and hyperlink references. So, if you have multiple image maps on the same page, you can have multiple <map> tat with different names.

<area shape =”rect” cords =”41, 16, 101, 32” href =”html”>

The type of shape to be used for the region is declared by the shape attribute, which can have the values rect, poly, circle, and default .The coordinates for each shape are noted using the cords attribute. For example, the cords attribute for a poly shape appears as follow:

<area shape =”poly” cords =”X1, Y1, y2, X3, y3, ….., XN, y N” href =”URL”>

Each X, y combination represents a point on the polygon. For rect shapes, X1, Y1 is the upper –left corener of the rectangle, and X2, Y2 is the lower – right corner.

<area shape =”cords =”X , y, radius” href =”Url”>

For circle shapes, x, y represents the centre of a circular region of size radius:

<area shape =”circle” cords =”x, y, radius” href =”URL”>

The default shape is different from the others – it doesn’t require any coordinates to be specified. Instead, the link associated with the default shape is followed if the user clicks anywhere in the image that doesn’t fall within another defined region.

Another attribute you need to define for each <area> tag is the href attribute. You can assign href any URL you a\usually would associate with an <a> clink, including relative path names .In addition, you canvassing href a value of “no href” to define regions of the image that don’t contain links to a new page.

NOTE

When you’re using client – side image maps with frames, you can include the target attribute inside an <are> tag to open a new page in a specific window, as in the is example:

<area shape =”rect” cords =”X1, Y1, X2, Y2” href =”URKL” target = “window _name”>

You need to include on more attribute in HTML 4.01. Earlier in this lesson, you learned how to specify alternate text for images. In HTML 4.01, the alt attribute is an additional requirement for the <are> tag that displays a short description of a clickable area on a client – side image map when you pass you cursor over it. Using the <are> example that I cited, the alt attribute appears as shown in the following example:

<area shape ="rect" coords ="41 , 16, 101, 32" href ="test. html" alt ="test link">