IMAGE MAP in HTML 5 ~ Online Quiz in IT

IMAGE MAP in HTML 5

When we want to create multiple hyperlinks, an image map is used in HTML5.

An image with multiple hyperlinks is called an image map.

Image map is used to connect links to different regions on the webpage. An image map is created by marking certain regions on an image clickable. These clickable regions are called as hotspots.

There are two methods of image mapping as follows-

1.Client Side

2.Server Side.

For creating client side image mapping,the following tags are used namely-

1.<img> 2.<map> 3.<area>

1. <img> :

This tag is used to insert an image on a webpage. In a client side image map usemap attribute of <img> tag is used and its value is preceded with a # (hash) symbol. The usemap attribute acts as a pointer which indicates that the image is a client side image map.

2.<map>:

It specifies name of the image used for client side image map. It has only one attribute name.The value of the name attribute is the value specified in usemap attribute of <img>.

3. <area> -

The both <map> and <area> tags are used for creating client side image mapping. Using the <area> tag, we create hotspots i.e. clickable regions on webpage. A given <map> element can contain multiple <area> elements within it. The <area> tag is singular tag and <map> is paired.

Attributes of <AREA>:

1. href-Specifies the URL to which the clickable region within the image map navigates.

2.shape-It has values rect, circle or poly.

3. coords-Specifies coordinates of the clickable regions on the image map.

1.Rect-specifies rectangular area with four coordinates.

2.Circle- Defines a circular region. It requires three coordinates.

3.Poly- Defines a polygon region with coordinates specifying each point on the polygon. It requires four coordinates.

4.Default- Region covers the entire image. No coordinates are required.

Example: Image map with element <map> and <area>.

<!DOCTYPE HTML>

<html>

<head><title>IMAGE MAP</title>

</head>

<body>

<h1>An EXAMPLE of IMAGE MAP

</h1>

</map>

</body></html>

Server Side Image Map-

When a server side image map is displayed on the browser, the program that executes links is placed on the server.The x,y coordinates of the position where hyperlink was created is sent to the server by browser.

There are three steps involved in creating a server side image map.

1. Create the image file:

There is no difference between a client side and server side image map file.

2. place the image map in the html document:

For server side image maps we add the <ismap>attribute and then we make the image a link to the image mapping program on the server or directly to the .map file.

Then we make it link by surrounding the element with the <a> tags and pointing it to the image mapping program.

</a>

3.create the map file and place in directory:

Map file does not have any of the html tags or attributes. The map file is simple text document.

The map file for a server side image map contains shape name of the area the URL assigned to the area and the coordinates which define the area.

Rect rect.html 10,8,260,58

Circle circle.html 400,300,70

This file would be saves as .map extension and could placed in the same directory as the image file.