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 :

---

<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:

Output :

---