Understanding Image Mapping in HTML

 What is Image mapping in HTML and How to map images?:

A single image with multiple hyperlinks is called as a image mapping. Specific areas of image are mapped known as Hotspot and each hotspot is a link.

Image mapping is of two types client side image map and server side image map. 

Client side image map is independent of server and executes on client machine. All information in client side image  map is loaded with image. It is faster than server side map.

Usemap attribute of img  tag identify that it is client side image map., while ismap attribute of img tag refers to server side image map.

Usemap attribute of <img>, <map>, <area> this elements are used to create hyperlinks or a hotspot on image. 

Attribute of map tag is name which specifies name to the image.

Attributes of area tag: 

       1. Href: path or url of html page

       2. Shape: Specifies shape and have values rectangle, circle, polygon

       3. Coords: specifies coordinates for rectangle, circle, polygon circle has 3 coordinate, rectangle 4, polygon many.

       4. Alt : define alternet text.

Attribute usemap=#abc means it is client side image map and mapping name is abc. 

Attribute ismap specifies that it is server side image map and required location of file which contains html file. 

Client side image map:-

 

Server Side Image Map:-

When server side image map is displayed on browser, program which execute link is placed on server. Now, the browser activate link on server by sending x and y co-ordinates of position where hyperlink is created. On receiving these coordinates server looks at map file for closest match of coordinates and load file which is in a range.

For creating a server side image map a map file on the server required which contains coordinates and hyperlink. 

A href attribute of <a> tag specifies location of external mapfile and server side image map program on server.

 In server side mapping coordinates are obtained in URL.