Image Maps

Image maps allow you to select areas within an image to act as links to other pages. In this image you can click on the number boxes one, two, or three to access three different html documents. Try it out.

 

There are two types of image map techniques, server side and client side.

  1. For a server side image map, you create a separate image map file (.map) that resides on the web server in a special system directory called cgi-bin. This file contains all of the x, y, coordinates for your image map boundaries. 
  2. For a client side image map, you specify all of the image map coordinates right in the .html file that contains the image.

Client side image maps react more quickly to the users mouse clicks. The drawback is that the user must be using a browser that supports client side image maps. Most current browsers do.

We will discuss client side image maps since they are the most popular. Also, because we do not have access to the departments cgi-bin directory.

 


The Three Step Procedure

Step One

Find the image that you want to use for an image map. Open it with an image editor, and collect the x, y coordinates that will act as the boundaries of your clickable areas. You can specify rectangles, circles, polygons, ovals etc. For rectangles you need to specify the upper left and lower right corners. See the links at the bottom of this page for details on other shapes. A program named MapEdit is very useful for collecting x, y coordinates for image maps. It's shareware and waiting for you to download at http://www.shareware.com.

Step 2

Specify in your html code that the image has an attached image map. The code used for the above example looks like this:

    <img src="exmap.gif" ismap usemap="#map1">

src is the image that is displayed, usemap is a portion of code in the file that lists the coordinates and links.

Step 3

Supply the map coordinates and links in your .html file. The code for the above example looks like this:

<map name="map1">
<area shape="rect" href="no1.html" coords="16,28, 119,114">
<area shape="rect" href="no2.html" coords="139,27, 242,114">
<area shape="rect" href="no3.html" coords="263,28, 366,114">
</map>

The map name is map1 as referenced in the img command. Each area command specifies a shape and coordinates for a clickable area. The href tells what the clickable area should link to.


Here is a more complicated image map that uses polygons instead of rectangles. The map was created in two minutes with the program MapEdit. Note how the edges of the hotspots follow the edge of the character's bodys. Polygons allow you to have unlimited amounts of sides.

The code for this Imap looks like this:

<img src="pandb.gif" usemap="#map2" width="320" height="310" ismap>
<map name="map2">
<area shape="poly" href="pinky.html" coords="102,3, 84,26, 84,48, 77,57, 78,70, 48,106, 39,89, 54,73, 40,76, 23,57, 8,80, 7,95, 29,91, 41,112, 51,121, 39,178, 47,190, 16,208, 21,215, 36,216, 56,202, 58,190, 68,177, 86,182, 98,202, 110,216, 131,219, 138,212, 133,203, 107,198, 84,130, 102,127, 101,116, 92,117, 89,93, 96,86, 107,88, 110,91, 113,87, 126,75, 144,66, 158,47, 154,41, 132,47, 137,30, 131,27, 115,27, 108,34, 103,3">
<area shape="poly" href="brain.html" coords="102,91, 105,137, 129,168, 144,176, 161,175, 174,187, 187,190, 164,199, 166,208, 178,212, 171,224, 128,232, 222,239, 224,223, 218,208, 233,212, 236,204, 223,188, 226,184, 234,183, 241,176, 237,164, 263,148, 285,121, 289,101, 281,97, 262,104, 251,111, 217,89, 196,86, 173,93, 158,102, 147,110, 143,120, 125,100, 110,92, 102,91">
<area shape="poly" href="http://www.warnerbros.com/home_moz3_day.html" coords="298,2, 286,6, 275,0, 274,9, 255,19, 258,37, 260,45, 275,61, 277,50, 284,46, 279,59, 284,66, 289,58, 289,51, 299,11, 298,2">
</map>


For more details on Image map check out the following links:

Imap basics and Server Side Imaps: http://www.hotwired.com/webmonkey/html/96/39/index2a.html

Client side Imaps: http://www.hotwired.com/webmonkey/html/96/40/index2a.html