Client-side imagemaps

Imagemaps are one of the more effective navigation tools used on Web pages.  An image is created with potential distinct areas so that the page viewers can select where to go by clicking on one of these distinct areas. The image and the imagemap information are stored in a Web page. The graphical browsers translate the hot-spots (the distinct areas) of the image to page URLs, without needing a server to do so. This makes the page download faster and the development of imagemaps easier. See an example here. Click on the different fish sizes and see what happens. 

Note: imagemaps can also be developed by storing the imagemap information in  Web servers, instead of in the pages, for security reasons.  I have tutorials on how to do it for  NCSA and CERN Web servers if you need this information in the future.

This lesson uses a special software available for Windows, Linux/Unix and Macs -- Mapedit -- for helping define the image hotspots, distinct areas, of the image and relate them to Web pages URLs.  Mapedit can be used 30 days for free and its registration costs only $15.00.  The graphical examples shown in the tutorial are from the Windows version. Note: Mapedit is also available through CNet Downloads.

Imagemap development overview

In order to create client-side imagemaps you need to have two components:

  1. an inline image saved in gif format: this will not be covered in this lesson, since we saw previously how to create and edit images. You can use software packages like PowerPoint, Corel Presentations, Freelance and/or Showcase for this purpose. You can also use images copyright-free that you can collect in the Net.
  2. an HTML document using regular markups and including the inline image you selected or created. You will open this page in Mapedit to select hot-spots and map them to URLs, as explained next.

Creating a client-side imagemap file

To start this section you need to have the gif file that you will use as the clickable image. and an html page with this gif file inserted in the page.

Starting Mapedit

Creating the hot-spots

Saving and uploading

Combining imagemaps with frames.

One of the most interesting applications of frames combined with an imagemap is to have an imagemap loaded in a left frame, for example, and the results of the choice of hotspots being shown in the right frame. Let me introduce the subject with another screen map as shown below:

We decided to have a top frame with a title and general information on the new page. Then the left frame would display an imagemap, and the right frame would display the results of clicking on the imagemap. This design splits the screen vertically (columns) and horizontally (rows) among the frames.

In the example the top frame got 100% of the columns but only 20% of the rows. Both the left and right frames got only 80% of the rows (the other 20% went to the top frame, as we saw). The left frame got 25% of the columns, while the right frame got the 75% remaining columns (this is similar to what we saw in the example at last class meeting in frames). See here the final product.

The following code (shown up to the NOFRAMES tag) implements the above design:

<title> Second example of frames </title>
<frameset rows="20%, 80%">
<frame src="page1.html" name="top" marginheight="1" scrolling="auto">
<frameset cols="25%, 75%">
<frame src="page2.html" name="left" marginheight="1" scrolling="no">
<frame src="page3.html" name="right" marginwidth="3" marginheight="1" scrolling="auto">

Once more, lets walk through the code:

Page2.html is the page where we decided to place the imagemap and load it in the left frame (as we saw above). This page was created as any other imagemap page is created, but thinking that we were only going to have 25% of the screen columns to display it (made it small). The code for the page2.html is shown below:

<title>Background Colors</title>
<body bgcolor="#000000" link="#000000">
<IMG SRC="colorimg.gif" usemap="#colorimg" border="0"></A>
<map id="colorimg" name="colorimg">
<area shape="rect" alt="" coords="0,1,172,33" href="white.html" title="" target="right" />
<area shape="rect" alt="" coords="2,33,173,57" href="wy.html" title="" target="right" />
<area shape="rect" alt="" coords="0,57,172,83" href="vly.html" title="" target="right" />
<area shape="rect" alt="" coords="1,82,172,108" href="ly.html" title="" target="right" />
<area shape="rect" alt="" coords="1,107,173,135" href="gy.html" title="" target="right" />
<area shape="rect" alt="" coords="0,136,173,163" href="bgy.html" title="" target="right" />
<area shape="rect" alt="" coords="0,163,172,187" href="yo.html" title="" target="right" />
<area shape="rect" alt="" coords="1,187,171,212" href="lb.html" title="" target="right" />
<area shape="rect" alt="" coords="0,211,173,239" href="bg.html" title="" target="right" />
<area shape="rect" alt="" coords="0,239,172,264" href="bb.html" title="" target="right" />
<area shape="rect" alt="" coords="0,264,173,290" href="s.html" title="" target="right" />
<area shape="rect" alt="" coords="0,289,171,316" href="r.html" title="" target="right" />
<area shape="default" href="../none.html" alt="" />

Looks impressive, right? But, it is very simple. The only difference from the above to a regular imagemap tag is the inclusion of target="right" and Mapedit was used to include the target right as shown below:

An additional benefit of the use of frames with imagemaps is that if the browser cannot see images, for sure it cannot see frames, and the regular linear page is shown. This way the imagemap page can be designed for imagemap viewers only, for the text readers will get the linear, text, page.

This page is maintained by Al Bento who can be reached at This page was last updated on January 15, 2010. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.