Image mapping :
Image mapping refers to the single graphic that can be used for multiple links.
There are two ways for image mapping :
1.Server sided mapping
Which requires browser to work with server to interpret your image map.
2.Client side mapping
The browser can map interpret mapped data without depending on server to do so.The <map> & <area> tags are used for client side image mapping.
The syntax for image mapping is :
<img src=http://prog101.blogspot.com/xyz.jpg usemap=map_name >
<map name=name_for_map >
<area shape=shape coords=coordinates_for_shape href=URL_of_web_page>
</area>
</map>
<map> tag :
This tag is used to define a client-side image-map.
The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
Further more the map element contains a number of area elements, that defines the clickable areas in the image map.
Attribute:
| Attributes | Description | Values |
|---|---|---|
| name : | Defines unique name for map to be used with <img> tag. | mapname |
<area> tag :
This tag defines the geometric regions of client side image map & the associated link. This tag is responsible for dividing image into parts.
Following are the attributes for this tag:
| Attributes | Description | Values |
|---|---|---|
| alt : | Provides textual information to visitors. | text |
| coords : | Defines coordinates within an image map that define image map area. | coordinates |
| href : | URL of the web page when user clicked particular image map area. | URL |
| shape : | Specifies type of shape used to represent the map area. The values can be rectangle :For this coords is set to four integer numbers. circle :For this coords is set to three integer numbers. poly :For this coords is set to six integer numbers. | default, rect, circle, poly |
| target : | Name of the frame where the web page will open after clicking the image map area. | _blank, _parent, _self, _top |
Here is an eg. of client-side image mapping:
<img src="http://developthecode.googlepages.com/flower11.jpg"
width="145" height="126"
usemap="#flower">
<map id="flower" name="flower">
<area shape="rect" coords="0,0,82,126" alt="Rectangle" href="http://prog101.blogspot.com">
<area shape="circle" coords="90,58,3" alt="Circle" href="http://prog101.blogspot.com/">
</map>
0 comments:
Post a Comment