Search within TutorialsPark

HTML Image Map


Create a client side map, marking certain regions of an image.


Image Map

1. An Image map is created by marking certain regions on an image map, clicking on these regions will lead you to specifc URLs.

2. Image Maps are of two types Client Side and Server Side. We will confine ourself to Client Side images only.

3. Client-side image map can be created using two elements <map> and <area>.

4. Here, <map> acts as container for image map, and <area> defines specific clickable regions.

5. A given <map> element can contain multiple <area> element within it.

Defining an Image Map

1. Specify an Image map with element <map> and then link it <img> tag using attribute usemap

2. Eg: For an image named maps.png

Demo:Defining an Image Map.




Regions of an Image Map :<area>

1.The Individual clickable regions wiithin an image map are defined by element <area>.

2.The <area> element comprises of two parts.

First part defines the URL to which the clickable region within the image-map navigates to.

Second part defines the shape and the coords(co-ordinates) of the clickable regions on the image-map


Attribute shape and coords.

Values of Shape and Coords attributes

Shape coords(Co-ordinates) value
rect Rectangular area with four co-ordinates

coords no:1 Distance between left edge of image to left side of rectangle.

coords no:2 Distance between top edge of image to top side of rectangle.

coords no:3 Distance between left edge of image to right side of rectangle.

coords no:4 Distance between top edge of image to bottom side of rectangle.

circle Defines a circular region. Three co-ordinates specify

coords no:1 Distance between left edge of image to the centre of circle.

coords no:2 Distance between top edge of image to the center of circle.

coords no:3 The Radius of circular region.

poly Defines a polygon region with co-ordinates specifying each point on the polygon.
default Region covers the entire image.No co-ordinates required.

Example: Image Map with element <map> and <area>

Give it a TRY»




Related Examples

Related Tags