Image mapping - Creating multiple links on a single image


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:
AttributesDescriptionValues
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:
AttributesDescriptionValues
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 berectangle :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="https://sites.google.com/site/developthecode/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://www.blogging-hacks.com/">
<area shape="circle" coords="90,58,3" alt="Circle" href="http://www.blogging-hacks.com/">
</map>
Output :


Rectangle
Circle

You Might Also Like

0 comments

Follow by Email

My photo
Hi. I am Ramesh Wetkoli. Three things I try to include in my blog posts are creativity, useful insights, and trendy information. I.T. graduate and working professional. I have leveraged 6+ years of work experience in I.T. industry and learnt various technologies, providing merchandizing support and handling digital marketing responsibilities.

Popular Posts

Find us on Facebook