Image maps helps us to specify areas in an image that can be clicked and works similar to a hyperlink. This can be used to make web pages more interactive and user friendly. A single image can have a number of regions defined each pointing to a different URL. In this post, all required tags along with examples are given to gain a complete understanding of image maps.
So, lets start directly with an example. First of all, we need to add an image to the web page so that an image map can be applied. Consider the code given below.
The above code will add an image picture.jpg on the web page. The displayed image will have a height of 200px and width of 300px. The attribute usemap specifies the image map to be used. It is given a value #imagemap. So now we have to create an image map with the same name given.
Before we proceed, we need to know about the coordinate system used and how to represent a point on the image. Every point on the image is defined by two values x and y where x is the distance of the point from left edge and y is the distance of the point from top edge of the image. All distances are measured in pixels. So the top left corner of the image given in above example will be (0, 0). Similarly the bottom right corner of the image will be (300, 200). So every point inside the image will have a value of x between 0 - 300 and value of y between 0 - 200. Here the center of the image will have the coordinates (150, 100). Hope the concept of coordinates is clear. Now lets move to the image map.
An image map will be defined within the <map> tag. The map tag will have a syntax as shown below.
<map name="imagemap"> </map>
Note that the name attribute should have the same value given in the <img> tag. Now we have to define the area. This is done using the <area> tag. The syntax of area tag is given below.
<area shape="" coords="" alt="" href="" />
Here the shape attribute determines the shape defined. It can be either rect, circle or poly. The coords define the coordinates of each point.The alt defines the alternate text for that area. The href gives the URL that corresponds to that particular region. To make things clear, lets see an example. Note that the area tag should always be placed inside the map tag.
So, lets start directly with an example. First of all, we need to add an image to the web page so that an image map can be applied. Consider the code given below.
<img src="picture.jpg" width="300" height="200" alt="alternateText" usemap="#imagemap" />
The above code will add an image picture.jpg on the web page. The displayed image will have a height of 200px and width of 300px. The attribute usemap specifies the image map to be used. It is given a value #imagemap. So now we have to create an image map with the same name given.
Before we proceed, we need to know about the coordinate system used and how to represent a point on the image. Every point on the image is defined by two values x and y where x is the distance of the point from left edge and y is the distance of the point from top edge of the image. All distances are measured in pixels. So the top left corner of the image given in above example will be (0, 0). Similarly the bottom right corner of the image will be (300, 200). So every point inside the image will have a value of x between 0 - 300 and value of y between 0 - 200. Here the center of the image will have the coordinates (150, 100). Hope the concept of coordinates is clear. Now lets move to the image map.
An image map will be defined within the <map> tag. The map tag will have a syntax as shown below.
<map name="imagemap"> </map>
Note that the name attribute should have the same value given in the <img> tag. Now we have to define the area. This is done using the <area> tag. The syntax of area tag is given below.
<area shape="" coords="" alt="" href="" />
Here the shape attribute determines the shape defined. It can be either rect, circle or poly. The coords define the coordinates of each point.The alt defines the alternate text for that area. The href gives the URL that corresponds to that particular region. To make things clear, lets see an example. Note that the area tag should always be placed inside the map tag.
<map name="imagemap"> <area shape="rect" coords="0,0,150,100" alt="area1" href="link1.html" /> <area shape="circle" coords="225, 50, 30" alt="area2" href="link2.html" /> <area shape="poly" coords="75, 120, 225, 120, 150, 200" alt="area3" href="link3.html" /> </map>
In the first area tag, the shape given is rect which means a rectangular region is to be defined. A rectangular region can be defined by two points, one is the top left corner and the other is the bottom right corner. The two points can be represented using four values which are given in the coords attribute.
In the second case, the shape defined is a circle. To define a circle, the center of the circle and the radius needs to be specified. Hence the coords have three values, first two defines the center and the third gives the radius.
In the third case, the shape used is poly. Using poly, a multi sided shape can be defined. In the example given above, a triangle is defined. The coords should have each of the corner of the shape separated by comma. The browser will automatically connect the last point to the first. Using the shape poly, you can define polygon with any number of sides.
So this is all that is required to get you started. Now take your favorite editor and give this a try. The image map is supported in all the major browsers.
No comments:
Post a Comment