Map Tag

A map tag is used to map an image. In other words; this image, called the mapped image, contains some regions that act as links to other documents. It is written as <map>. The user can set these regions and these regions are quite similar to a hyperlink. This is because when they are clicked on, they refer to some other document.

To create an image map, another tag called area tag is used which will be explained later.

Attribute of Map Tag

Name

The name attribute sets the name of the image map. It determines which map definition the image uses.

Area Tag

The area tag defines a region in an image map. This tag includes various attributes as it cannot function alone. It requires the href attribute to link to other documents.

Attributes of Area

Href

The href tag indicates the URL that the <area> tags links to. The syntax of this tag is similar to the anchor tag.

Alt

The alt attribute in the <area> tags works just like it works in the <img> tags. It indicates the alternative text that is to be displayed if the browser does not display the picture.

Cords

The cords attribute is the coordinate attribute. This tag is used with the shape attribute (the shape attribute has been described later).

It specifies the coordinates of the area that has to be clicked and indicates where the shape is located in the image map. The Cords tag is necessary when the shape attribute is set to Rect, Circle or Poly. It is not required if the shape is set to Default.

Shape

The shape attributes indicate what shape the area is. The shape of the map must be set to the following values:

Rect

Rectangular shape indicates that the area is a rectangle. The cords attribute consists of two pair of x/y coordinates for a rectangle. The first pair sets the coordinates of the upper left corner of rectangle. The second pair sets the coordinates of the lower right corner of the rectangle.

Circle

Circle shape indicates that the area is a circle. The first two numbers in the cords attribute indicate the coordinates of the centre of the circle. The next number indicates the radius of the circle.

Poly

Poly shape indicates that the area is some type of polygon. For a polygon each pair of coordinate in cords indicates the single corner of the polygon.

Default

Default indicates that the area isn’t really a shape but the href attribute applies to the whole area. In this attribute coordinates are not given.

ExpertRating HTML Certification - Get Certified Now!!