Image Mapping
There is also a method of hyperlinking various parts of a single image to various webpages. This is done by image mapping. In image mapping, we can define a part of the image and create a hyperlink to it.
The first step is to create the image map and link it. Then we insert the image and refer to the image map that was created in the first step.
To create an image map, we use the MAP tag and give it a name to the image map.
<MAP NAME="MYMAP">
In the above code, an image map has been created and named as MYMAP. Next we define the shape of the area which must be hyperlinked. the shape could be a rectangle, circle or a polygon. How do we define the exact area to be hyperlinked? We do this by defining the coordinates. A coordinate is a pair of numbers which indicate a point in the image.
For example, if we want to define a small square at teh top left corner as a hyperlink, then we must specify the coordinates of the square. The numbers 0,0 indicate the top left corner of the image. the numbers 2,2 indicate a point inside the image where the numbers 2 at the top and the left side would meet. This way we could from a rectangle.
To define a circle, we must give three numbers. The first two numbers would indicate a point within the image and third would be the radius which would be drawn adound that point to form a circle.
A polygon would need several pairs of coordinates, one pair for each vertex of the polygon. For example if we wish to define the following polygon we must define six pairs of coordinates since it has six vertices.
How do we specify the shape and the coodinates? By using following tags.....
<AREA SHAPE="shape name" COORDS="coordinate1, coordinate2, etc...." HREF="hyperlink path">
As already mentioned, the SHAPE could be either RECT CIRCLE or POLYGON. the COORDS could be two pairs of numbers for a rectangle, three numbers for a circle, or the desired pairs of numbers for a polygon. HREF indicates the ususal path for the webpage to which the hyperlink leads.
Once we have defined the above attributes, we close the image map definition using the </MAP> tag. An example of an image map is given below:
<MAP NAME="MAP1">
<AREA SHAPE="RECT" COORDS="0,0,40,30" HREF="COMPANY6.HTM">
</MAP>
In the above example, we have defiend an image map and specified a rectangle at the top left corner of the image as a hyperlink to the webpage company.htm.Now we must actually use the image map for an image in our webpage. To do that , we use the following tag to inset a picture and refer to the above image mpa:
<IMG SRC="CLOUD.GIF" USEMAP="#MAP1">
Please note that you must define the image map in the same HTML file in which you are inserting the image. In the above code, we have inserted an image CLOUD.GIF using the normal IMG tag and then referred to the image map we created above using the USEMAP tag and we have given the image map name with a # symbol before it.
Now when the image is inserted automatically the top left ocrnor would become a hyperlink to the webpage company.htm. You can confirm this by moving the mouse over the top left corner and see if the mouse pointer turns into a hand.