Client Side Image Map – Image Maps part 1

Client Side Image Map – Image Maps part 1 cover image
  1. Home
  2. HTML
  3. Client Side Image Map – Image Maps part 1

You know that an image can be made into a hot spot by enclosing it inside anchor tags. Such images point to only one HTML document, the one specified in the HREF attribute of the enclosing <A> tag. Thus,

<A HREF="//">
<IMG SRC="home.gif" WIDTH="152" HEIGHT="25" 
ALT="Back to homepage" BORDER="0"></A>

Back to homepage
Provides a link to homepage of this site.

Image maps too, carry links to documents. However, in Image Maps, different parts of the image are linked to different HTML documents! For example, the top part of the image might link to document1.html, the middle part to document2.html and the bottom to document3.html.
Linking different parts of an image to different documents/files is achieved through some specific HTML tags.

But before all that, let us get to know these image maps better.
Image Maps come in two flavors:

There is always a performance benefit when using Client-side maps. They can also be made interactive using JavaScript. Since, client-side maps are supported by all modern browsers and are simpler to understand and implement than server-side maps, I shall be concentrating only on them.
[Though, the usage of older browsers has dwindled, it is recommended that you have a look at your site statistics to make a decision whether to use server-side maps, client-side maps or both.]

Client-side Image Maps

In order to use an image as a map, you have to include the USEMAP attribute inside the <IMG> tag. Thus, any image can be made into a map if the USEMAP attribute is added to the <IMG> tag. The value of this attribute is the name of the <MAP> element. The <MAP> element contains the main information about the image map. It defines the different areas of the image and their associated links.
The different regions of the image are defined using the <AREA> tags. These tags are placed between <MAP> – </MAP> tags. The link data is also specified by the <AREA> tags.
Your document can carry as many image-maps as you want, but each should have different maps to tell them apart.

Let’s look at some code.

<IMG SRC="sitemap.gif" WIDTH="200" HEIGHT="300" BORDER="0" 

The SRC attribute of <IMG> tag specifies sitemap.gif to be used as an image map. The USEMAP attribute points to the map we shall be using.
Note: The name of the map is prefixed with a hash # sign.

It’s simple, isn’t it? Now we shall look at the <MAP> tag and the <AREA> tags it encloses.


This element has many attributes. Most of them are useful for scripting and for applying styles. We shall concern ourselves with only one, the NAME attribute. This attribute determines the name of the map and is used to refer to it from USEMAP attribute of the <IMG> tag. We’ll name our map, site.

<MAP NAME="site">

<AREA> tags and attributes

The main content of the image map resides inside <AREA> tags. Their important attributes are:

<MAP NAME="site">

<AREA HREF="../../index.html" SHAPE="RECT" COORDS="5,6,95,25">
<AREA HREF="../../basics/index.php3" SHAPE="RECT" 
<AREA HREF="../index.php3" SHAPE="RECT" COORDS="61,65,125,83">
<AREA HREF="../../graphics/index.php3" SHAPE="RECT" 
<AREA HREF="../../tips/index.php3" SHAPE="RECT" 
<AREA HREF="../../design/index.php3" SHAPE="RECT" 
<AREA HREF="../../promotion/index.php3" SHAPE="RECT" 
<AREA HREF="../../se/index.php3" SHAPE="RECT" 
<AREA HREF="../../software/index.php3" SHAPE="RECT" 
<AREA HREF="../../services/index.php3" SHAPE="RECT" 
<AREA HREF="../../feedback.php3" SHAPE="RECT" 
<AREA HREF="../../feedback.php3" SHAPE="CIRCLE" 


The value of COORDS taken by RECT is the top-left corner and bottom-right, x and y coordinates. For CIRCLE, the value is x and y coordinates of the center and the radius.
The co-ordinates of the image map are specified in pixel values and you can use any graphics program to find them. Now, this procedure is quite painful and time-consuming, so I suggest you use one of the Image-Map coordinates generator programs.