Map is a very useful tag that can replace a large number of links in
the form of text with an image whose different areas can create the same
effect. Those areas (called hot spots) need to be identified on an
image. therefore, it seems logical that a MAP tag should be accompanied
by an image and a set of tags to identity the shape of those hot spots.
And that is exactly what happens.
The MAP tag itself has only one attribute, NAME, and its end tag is
</MAP>. However, between the start MAP tag and its end another tag
is, AREA, is repeated as many times as we have the hot spots.
AREA tag with its most useful attributes is presented as:
<AREA SHAPE=shape_type COORDS=coords HREF=url
The attribute SHAPE defines the type of shape. The shape_type can
- RECTANGLE (or RECT): for rectangular shape hot spot.
- CIRCLE (or CIRC): for circular shape hot spot.
- POLYGON (or POLY): for polygonal shape hot spot.
The COORDS attribute specifies the coordinates that define
the hot spot's shape.
coords values are different for different SHAPEs.
For RECT, you
need to define the coordinates of two points in the form of x1, y1, x2,
and y2 where x1 and y1 are the coordinates of the upper left corner point
and x2 and y2 are the lower right corner point
Finally, we need an image that is going to be used for our map. The
regular IMG tag is used to display the image, however an
additional attribute is added to the IMG tag to identify the
name of the map being used--the same one defined in the NAME
attribute of the MAP tag. The attribute used in IMG tag for
this purpose is USEMAP=#map_name.
For CIRC, you need three coordinates, x and y of the center of the
circular hot spot and the length of its radius in pixels.
For POLY, you need three or more pairs of coordinates denoting a
Here is an example of a map.
The following statements were used to generate that map:
<IMG SRC="images/tricycle.jpg" USEMAP="#tricycle" BORDER=0
<AREA SHAPE=CIRC COORDS="277,122,26" HREF="http://www.wheels.com/"
<AREA SHAPE=RECT COORDS="194,65,243,78" HREF="http://www.seating.com/"
COORDS="226,38,238,35,261,62,269,61,267,38,279,35,280,43,272,48,273,67,260,68,238,47,226,45,226,38" HREF="http://www.handle.com/" ALT="">
COORDS="155,170,176,152,211,141,231,140,288,155,316,180,306,200,266,201,206,192,158,185,155,170" HREF="http://www.shadows.com/" ALT="">
<AREA SHAPE=CIRC COORDS="216,115,20" HREF="http://www.right.com/"
In the first line, we are placing the image in our document and by using
USEMAP="#tricycle" we are connecting that image to
a map named tricycle.
In the second line, we are defining a map named tricycle.
Lines 3-7 are defining the hot spots on the image through the AREA tag.
As mentioned earlier, a shape is defined (rectangle, circle, or polygon)
with its appropriate coordinate definition.
Finally, the last line is the closing tag for the map.
The method mentioned above is called the client-side image map. In this
map, you put all the information about the map in your HTML document. All new
browsers properly execute the client-side image maps. There is also a
server-side image map that requires the system
administrator to define the map in the root directory of the server.
This is now obsolete.
The only chore in setting up image maps is in finding the
coordinates necessary for COORDS attribute of the SHAPE tag. There are
two ways to accomplish that. In the first method, you write the
statements for the map and manually find the coordinates of the points
you are looking for. In the second method, you use a software program that
help you identify the shape of the hot spots and draw them on the image
and let the software save the image map. You can then cut/paste from
this file into your original document. In this case, all statements are
generated by the software (although, you have to make sure that the path
for the image is correct and a copy of the image exists in your
account). Most image editors such as Paintshop Pro will give you the coordinates
that you need to use in image maps.
The following tutorial (written for an older edition of the software) illustrate the approach.
Using an image editor