Tutorial

What are client-side image maps?

First of all, what is just a plain old image map? As you can guess from the name, image maps involve images. An image map is an image that you can click on, and the web browser will "map" the location of your click to some other HTML document, GIF, sound, or whatever.

Now, you're probably wondering "What's so special about client-side image maps?". In the old days, before Netscape 2.0 was released, to implement an image map, your web page had to run a small program on the web page's server to translate the location of the click to something useful. This has the draw-back of requiring the server to perform extra work to simply convert a pair of coordinates into a location. This means the server has less time to dish out web pages to other people and you also have to wait for your browser to find out where to go next.

Now, what's a client-side image map? The type of image map described in the previous paragraph can be called a server-side image map, so it would be safe to conclude that a client-side image map means that your web client (a.k.a web browser) performs the dirty work of tranlating click locations.

If you're still not sure what this client and map stuff means, don't worry, it'll start to make sense once you play around with some image maps. In fact, you might even have fun!

Before you get started, make sure you are using Netscape version 2.0 or greater. If you don't have Netscape version 2.0 or greater yet, you can download it by clicking on the Netscape logo below.

Things you should be familiar with before going on:

Basic HTML documents
In-line images (IMG tag)

Image Map Design Process

The steps to develop a web page using client-side image maps are fairly straight forward. Follow each of the hyper-links below to see a full explanation of each step. Throughout this tutorial there will be things to view or download, so you can build your very own image map page along with this tutorial.

Step 1 - Create a new HTML document

Step 2 - Create or obtain an image to use as an image map

Step 3 - Determine coordinates surrounding "hot spots"

Step 4 - Put a MAP definition in your HTML document

Step 5 - Set up destination documents (if needed)

...and that's it. You should now have a web page with a working client-side image map.

Where to go from here?

That's for you to decide. Try to be creative and replace simple hypertext lists (like the steps above) with an image map. There are many other uses for image maps, just let your imagination flow.

Session 9 | Example Page

http://www.cgocable.net/~cassidyb/cis500/session9/tutorial/tutorial.html