Creating a Client-side Imagemap

• Description
• Uses
• What you'll need
• Creating an imagemap with Dreamweaver
• Test your imagemap
• Working example of a client-side imagemap

---

Description

Imagemaps give users the freedom to click on different parts of an image to move to different Web pages. At their most basic, imagemaps are just a fancy way to list URLs. To create an imagemap you will define "button" regions (circles, rectangles or polygons) within the image and associate a URL with each region. When a user clicks on one of these buttons they will be taken to the Web page whose URL you associated with that button.

An imagemap shouldn't be confused with an image that is used as a link. An imagemap can have many buttons defined in it, while a simple image link can have only one.

There are two types of imagemaps:

• Client-side - All the HTML tagging needed for the functioning of the imagemap is contained in the Web page where the image will be displayed. Newer versions of most Web browsers support these.
• Server-side - A utility housed on a server is needed to make the imagemap work properly.

This page covers only client-side imagemaps.

---

Uses

Anything that involves interacting with a graphic can make use of an imagemap. Here are two examples:

• A user could click on one building on a map and then be shown a picture of that building or additional information about it.
• A user could click on one person's face in a group photo and be taken to a page of information about that person.

---

What you'll need

An image

Selection

The image you choose should be one that you have created or have permission to use. If you are not certain that an image is in the public domain, it is best to select another one. If you need to create one, there a several programs that you can use.

Format

Be sure that your image is in .gif format or that you can later convert it to this. The image's filename should end in ".gif" and should not contain any spaces. Although some imagemap creation software may be able to handle images other than those in .gif format, you can always use a .gif image.

Colors

An 8-bit color .gif image has a maximum of 256 colors. If your image has more, you'll lose the extra ones when you convert it to .gif format. If given a choice when converting, use the "Adaptive palette" (uses the 256 most common colors in your image) instead of the "System palette" (uses the computer's built-in color palette, which may try to include some that aren't in your image).

In addition, before you make an imagemap, check the image's appearance on different monitors. Higher resolution will make the image look smaller. If a monitor can display only 256 colors and it's already using 50 to show other things, your image may not appear as expected. You can't control someone else's monitor, but you can always make an image that uses fewer than 256 colors.

Size

A good rule of thumb is to keep images no wider than 500 pixels (the approximate "standard" width of most browser windows) and no taller than about 400 pixels. Larger images take too long to load, and may not be completely visible all at once to people with smaller monitors.

Software for defining an imagemap

There are several specific programs for creating client-side imagemaps, including Mapedit (for Windows, Unix and Macintosh) available from http://www.boutell.com/mapedit/. Version 2.63 or later will support client-side imagemaps. Version 2.0 or later will support .gif, .jpg and .png images.

When you have created and tested the imagemap, you can copy and paste its HTML tagging into your Web page.

Several Web tools, e.g., Dreamweaver, have built-in utilities that allow you to create imagemaps as a part of a Web page.

Creating an imagemap with Dreamweaver

1. Choose an image and place it in the same folder as the Web page on which you want it to appear.
2. Insert an image tag for this image into the document at the spot where the imagemap will appear.
3. If the Properties Inspector is not already visible, turn it on by selecting "Properties" from the "Window" menu on the menu bar.
4. Click anywhere on the image. This will open the image portion of the Properties Inspector.
5. In the lower left corner of this window you should see the panel entitled "Map." If this is not visible, expand the window by clicking on the small triangle in the lower right corner of the Properties Inspector.
6. Define the shape:
   1. Choose one of the three map shapes (rectangle, circle, polygon) by clicking on it.
   2. For a rectangle or circle, place your cursor at the upper left, hold down the left mouse button and drag the shape to the size you want.
   3. For a polygon, place the cursor at one of the vertices and click the mouse button. Then click each vertex in sequence around the periphery of the image.
7. Set up the link:
   1. When you have finished defining a shape, click anywhere in it.
   2. Click on the small folder icon to the right of the link box.
   3. Browse to the page that you want this shape to link to and select it. Alternatively, copy and paste the page's URL into the link box.
8. Repeat steps 5 and 6 for each region of the image that you want to become a link. Make sure that the regions don't overlap unless there is a specific need to do so. For example, overlap is actually useful if you want to place a smaller button inside a larger one. You'd define the smaller button first and then the larger one.

Test your imagemap

Make sure all the buttons work.

Working example of a client-side imagemap

Here's an example of an imagemap with rectangular, circular and polygonal buttons.

 

Last modified July 20, 2004 by cawalker