A Complete Guide to Web Design

138 Chapter 8 – Creating Links

Imagemaps

Web Design in a Nutshell, eMatter Edition

imagemaps, as the name suggests, the map information resides on the server and

is processed by the server or a separate CGI script.

Client-side imagemaps are a slightly newer technology and are not universally

supported by all browsers (although the majority of current browsers know what

to do). For this reason, many web developers create redundant imagemaps (both

client- and server-side) so that if the browser doesn’t recognize the client-side

map, the server’s imagemap processor can take over.

Creating Imagemaps

The key to making imagemaps work is a map, based on the image, that associates

pixel coordinates with URLs. This map is handled differently for client-side and

server-side (as we will outline below), but the outcome is the same. When the

user clicks somewhere within the image, the browser passes the coordinates of the

mouse pointer to the map, which, in turn, generates the appropriate link.

Available tools

Although it is possible to put together imagemap information manually, it is much

easier to use a tool to do it for you. There are many imagemap creation tools

available as shareware for both Windows and the Mac. Be sure to look for one

that is capable of outputting both client- and server-side map information, such as

the following:

Mac

MapMaker 1.1.2 by Frederic Eriksson available athttp://www.kickinit.com/

mapmaker/

Windows

MapEdit by Tom Boutell available athttp://www.boutell.com/mapedit/

If you have one of the popular WYSIWYG HTML editors, chances are there’s an

imagemap creation tool built right in.

Creating the map

Regardless of the tool you’re using, and regardless of the type of imagemap you’re

creating, the process for creating the map information is basically the same. Read

the documentation for your imagemap tool to learn about features not listed here.

1. Open the image in your imagemap program.


2. Define areas within the image that will be clickable by using the appropriate
   shape tools: rectangle, circle, or polygon (for tracing irregular shapes).


3. While the outline of the area is still highlighted, enter a URL for that area in
   the text entry field provided, as shown in Figure 8-1.


4. Continue adding shapes and their respective URLs for each clickable area in
   the image.


5. For server-side imagemaps, you also need to define a default URL, which is
   the page that will display if users click outside a defined area. Many tools