HTML Image Map
Create a client side map, marking certain regions of an image.
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
|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.|