Image MapsThe technique that has been implemented to achieve linkining of mulitiple documents to the same image is known as Image Map.When a hyperlink is created on an image, where we link a single document to one image using <a href> tag , clicking on any part of the image will take us to the document specified in <a href>. Let us say that we have very large image and there is a need to link multiple documents to the same image, there has to be a technique that divides the image into multiple parts and allows linking of each part to a different document.
<Map> .. </Map> Tags:These tags are used to create image maps i.e, dividing a single image into various areas.
Attributes of <Map>:Name :This is the name used to referece the map in an HTML File
With in <Map> ..</Map> tags <Area> tag is used to define the specific region with in the image.
Attributes of <Area>:
Href :This is used to specify the name of the document that is being linked to a particular area of the image.
Shape : Used to specify the shape of the region. The possible values for this attribute are Rect, circle, polygon, default.
Coords : This attribute is used specify the coordinates depending upon the shape of the region. For example,
The default shape will not take any parameter and it indicates that the area of the image is not specified under any <area> tag.
The rectangle shape will take four coordinates as parameters say (x1, y1, x2, y2) i.e.,
x1, y1 denoting the upper left corner and x2, y2 denoting the lower right corner.
Circle will take three coordinates. Center say(x, y) and the radius of the circle.
Polygon will take three or more pairs of coordinates representing its region.
<Area shape="rect" coords="40,60,150,80" href="temp.html">
<Area shape="rect" coords="150,60,250,80" href="temp1.html">
Now creating regions on the image has been done. Now, let us see how to apply image map to a particular image
<img> tag takes an attribute called USEMAP, which is used to apply the image map to that particular image. It takes the name of the image map, and applies the map specifications to that particular image.
Note : The value of usemap attribut should always precede with the # sign
<img src="bubble.gif" usemap="#mapex">