In the Image Map we can click on various parts on the image and get the relevant information. And the hot spot is the area of the image being clicked. The important part in image mapping is identifying the co-ordinates of the image parts.
Now how to find the coordinates of an image? It is very easy. To find the coordinates of an image follow the following steps:
- Open the image in paint.
- Move the mouse cursor on the image.
- The X and Y coordinates are on the status bar.
The following is one of the shape that is used to locate hot spots.
1. rect: For this shape x1,y1,x2,y2 coordinates can be set, where x,y denotes the top and left limits and x2,y2 denotes the right and bottom limits. The syntax for using rect as a hot spot is,
<area shape="rect" coords=x1,y1,x2,y2 href="url">
2) Circle: For this shape x,y,r coordinates can be set, where x,y denotes the top and left limits and r denotes the radius. The syntax for using circle as a hot spot is,
<area shape="circle" coords=x1,y1,r href="url">
Here,
Coords: With the coords attribute different sections of the image are specified with the X and Y coordinates.
HREF: The HREF attribute specifies the file or webpage that will be displayed when a particular section of the image is clicked.
Consider the following example,
The above image has various programming languages logos. You can get the respective information by clicking the various parts of this image. For example, if you click on the C Language then it takes you into the page http://cplus.about.com/od/introductiontoprogramming/p/profileofc.htm
The above image has various programming languages logos. You can get the respective information by clicking the various parts of this image. For example, if you click on the C Language then it takes you into the page http://cplus.about.com/od/introductiontoprogramming/p/profileofc.htm
Click here to download the code.
08:34
Share:
0 comments: