Module 09 - Page 01 - Client-Side Imagemaps

Client-Side Imagemaps

You already know how to turn images into hyper-references using the A (anchor) tag to mark an IMG tag.

Example:

Displayed:

When you wish to have MORE than one link available from a single picture, however, the above code won't work for you; you'll need to create an imagemap.

Here is a simple picture which could benefit from becoming an imagemap; notice the two distinct areas which could be clickable:

Here is an example of the above picture used as an imagemap. With the imagemap enabled, the user can click on the square labeled "1" to go to the first destination, and click on the square labeled "2" to go to the second destination. This is a simple imagemap; much more complex ones are possible, of course.

Again, an imagemap allows you to take an ordinary image and make multiple clickable hyper-references available to the user from that one image. I'm sure you've seen much more complex examples of imagemaps while surfing the Web. Any number of areas, in a variety of shapes, may be made clickable within the bounds of a single image. For instance, you could take a picture of the state of California, map all of the counties as separate clickable areas, and make each county on the image a hyper-reference to the appropriate county home page.

In this module, I'm going to show you how to make an imagemap by hand, an important skill. However, when constructing complex imagemaps out in the professional world, you may wish to use some sort of software to derive the imagemap for you, saving time and effort.

A shareware program can be downloaded from the Web called MapEdit, which can handle imagemap construction for you automatically. MapEdit is offered for Mac, PC, and UNIX platforms. It is available at http://www.boutell.com/mapedit/.

Most major WYSIWYG HTML editors, such as Dreamweaver and Adobe GoLive, include some sort of imagemap generating software. In addition, I believe that HomeSite has an on-board imagemap generator included.

Having said this, I must add that, in my years working as a web professional, I have never been called upon to make an imagemap complex enough to require automatic imagemap generating software; all of the imagemaps I have ever worked on were fairly simple, where it was much faster for me to just code the thing entirely by hand rather than to use more sophisticated software. Many imagemaps demanded by clients will be quite simple, filled with little more than mapped rectangles which are quite easy to derive. Because of this, it is important to know exactly how to construct imagemaps quickly and efficiently by hand.

Main Menu