Client Side Image Map – Image Maps part 1

Home
HTML
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="//www.webdevelopersnotes.com">
<IMG SRC="home.gif" WIDTH="152" HEIGHT="25" 
ALT="Back to homepage" BORDER="0"></A>

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:

Server-side maps: Those that contain the linking information on the server.
Client-side maps: The linking information is bundled along with the HTML document.

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" 
USEMAP="#site">

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.

<MAP>…</MAP>

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">
...
Content
...
</MAP>

<AREA> tags and attributes

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

HREF: Takes a URL as value and provides a link to that document.
SHAPE: The values for this attribute can be RECT, CIRCLE, POLY or DEFAULT. These define the shape of the area in the main image. After dividing your image into RECTs, POLYs, and CIRCLEs, you might be left with some area. You can use the DEFAULT value to refer to this area.
COORDS: Takes a comma-separated list of values. Depending upon the shape, this value changes.
TARGET: Specifies the window in which to load the document. This attribute is the same as that for <A>.
NOHREF: This is employed when you do not want areas to be linked to any documents. Used often with the DEFAULT value of SHAPE mentioned above.
NAME: This defines an area that can be used for scripting, by older browsers.

<MAP NAME="site">

<AREA HREF="../../index.html" SHAPE="RECT" COORDS="5,6,95,25">
<AREA HREF="../../basics/index.php3" SHAPE="RECT" 
COORDS="61,43,109,60">
<AREA HREF="../index.php3" SHAPE="RECT" COORDS="61,65,125,83">
<AREA HREF="../../graphics/index.php3" SHAPE="RECT" 
COORDS="61,88,124,106">
<AREA HREF="../../tips/index.php3" SHAPE="RECT" 
COORDS="61,112,164,129">
<AREA HREF="../../design/index.php3" SHAPE="RECT" 
COORDS="61,133,145,152">
<AREA HREF="../../promotion/index.php3" SHAPE="RECT" 
COORDS="61,158,161,174">
<AREA HREF="../../se/index.php3" SHAPE="RECT" 
COORDS="61,180,168,199">
<AREA HREF="../../software/index.php3" SHAPE="RECT" 
COORDS="61,204,128,221">
<AREA HREF="../../services/index.php3" SHAPE="RECT" 
COORDS="61,227,158,244">
<AREA HREF="../../feedback.php3" SHAPE="RECT" 
COORDS="61,249,142,267">
<AREA HREF="../../feedback.php3" SHAPE="CIRCLE" 
COORDS="145,25,40">

</MAP>

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.