Applying Image Maps

Applying Image Maps

Client side image maps

They are enabled by using the usemap attribute for the <img /> tag and defined by special <map> and <area> extension tags.

<map> and <area> tags have good support in browsers. The image for the map is added to the web page by the <img /> tag, but it has usemap attribute. The usemap attribute specifies the particular map to be used for the image. The value of the usemap attribute is same as value of the name attribute in <map> tag, preceded by hash sign (#).The name attribute of the <map> tag, and identifies the map. This is how the <img /> element knows which <map> element to use.

The <map> tag defines the map for the image and usually follows directly after the <img /> tag. It is a parent tag or a container for the <area /> tags which outline the clickable hotspots by giving the shape and coordinates starting from the top left corner of each clickable hotspot. As explained in the example

<img src=/images/register.gif alt=”Register Map” border=”0″ usemap=”#register”/>

<map name=”register”>

<area shape=”circle”

coords=”54,50,59″ href=”new.htm” alt=”New student” target=”_self” />

<area shape=”rect”

coords=”25,24,88,86″ alt=”Old Student” href=”old.htm” target=”_self” />

</map>

Attributes used for image maps in <area> tags are

shape – It specify a shape for the hotspot and its default value is a rectangle. It can take values of rectangle or rect, polygon or poly and circle or circ

coords – It specifies the area of the clickable hotspot. Its values depend on the value of shape attribute as 

Shape Value	Coord values	Meaning
rect	x1 , y1 , x2 , y2	x1 and y1 are for upper left corner and x2 and y2 for lower right corner.
circle	xc , yc , radius	xc and yc are coordinates of center of the circle, and radius is the circle’s radius.
Poly	x1 , y1 , x2 , y2 , x3 , y3 , … xn , yn	The various x-y pairs define vertices (points) of the polygon, with a “line” being drawn from one point to the next point.

href – href is same as the href attribute for an <a> element; its value is the URL of web page to go to when clicked on that part of the image.

alt – It is the text alternative same as the alt attribute on the <img> element but it overrides the alt text specified for the image.

target – It specifies where the target should be loaded and values are same as for the target attribute of the <a> element.

tabindex – It is the sequence in which users can tab through items on a page.

Server-Side Image Maps

In it <img> tag is placed in the <a> tag and uses the ismap attribute to the <img> tag. The ismap attribute indicates to the browser of a special map on the image having more than one link.

Browser gives the coordinates of the mouse pointer when clicked within the image, along with the URL given in the <a> tag to server. The server uses this input to determine what to deliver back to the browser. 

The href attribute of the containing <a> tag must have the URL of a server application like cgi script etc. if ismap is used, to process the browser’s request based on coordinates.

The coordinates of mouse position are screen pixels computed from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL and given to the server as in the example

<a href=”/cgi-bin/register.cgi” target=”_self” >

<img ismap src=”/images/register.jpg” alt=”Register ” border=”0″/>

</a>