ZipLink Class: Imagemaps

Imagemaps allow you to create documents that do different things depending on where the user clicks on a given image. The most common use of imagemaps is for menus. Here, you create a set of menus using a paint program rather than needing to do them in HTML. This makes things more fun and interesting.

Since we run the Apache Web server which supports imagemaps internally, setting them up is quite simple. The first thing you need to do is create a map file. A map file tells the server where to go if the user clicks on certain areas of the graphic. The easiest way to do this is with a program like mapedit that will do the work for you. Mapedit (which is a Windows program) displays the graphic and allows you to define regions on it. Once done, it saves this information to a file with a .map extension. When asked what format you want to save the map file in, choose "NCSA-Style".

Now, place your map file in your Web directory using WS_FTP or a similar ftp program. Make sure the program has a .map extension, so the server will recognize it.

The final step is creating/modifying your HTML file to support your new imagemap. Here's the basic layout of HTML tags to create an imagemap:

<A HREF="path_to_the_map_file"> <IMG SRC="path_to_the_image" ISMAP> </A>

Below is a sample imagemap. Click on Moxie to be brought to the Moxie home page or healthful to be brought to another page.

Here's the code that's used to achieve the Moxie imagemap: <A HREF="/users/steve/imagemaps/ted.map"> <IMG SRC="/users/steve/imagemaps/ted.gif" ISMAP></A>

Just like HTML documents, JPGs and GIFs, .map files can be anywhere in your Web directory. You can use as many as you want.

If the server is complaining about a configuration error, you haven't set file permissions correctly.

©2000 ZipLink. All Rights Reserved.