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.

Output :

Share This Story

You Might Also Like

0
comments

Follow by Email

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.