A Cool Site for learning different

Sunday, August 21, 2011

Client-side image maps

Client-side image maps

What is an image map

Image maps are images that have certain regions which link to different addresses. Here is an example of one:
Image map You will see that as you move the mouse over the different colour regions in the image, the link address changes.

How to use an image map

To use an image map on a webpage you must start in the way you usually put an image on a page.
<img src="myimage.gif" width="100" height="100" alt="Image map"> Now you must add the usemap attribute to the img tag to tell it which image map it must use. You must also set the border to 0 because when the image becomes a link it gets a border which we don't want.
<img src="myimage.gif" width="100" height="100" alt="Image map" usemap="#mymap" border="0"> Now that we have done the image we must make the image map. The map tag is used to create an image map and it has the name attribute which must have the same value as the usemap attribute of the img tag.
<map name="mymap">
After that we must use the area tag to create the link areas of the image map.
<map name="mymap">
<area shape="rect" href="red.html" coords="0,0,26,100">
<area shape="rect" href="red.html" coords="26,0,100,24">
<area shape="rect" href="red.html" coords="26,24,100,100">
The shape attribute says which shape area must be used. The example above uses a rectangle. You can also use other shapes like circles. Using shape="default will make it cover the rest of the area in the image that has not already been mapped."
The href attribute is the link address as you have probably already guessed.
The coords attribute has a set of 2 x and y coordinates which define the area of the rectangle.