Appendix A: The Image Map Editor
index | previous | next


 
Fig. 5  When the user points at an image map hotspot in the browser window (Netscape is pictured), the cursor changes into a pointing hand to indicate to the user that they can click there to find a link.
 
 

Forms and Image Maps

I describe one way of making this sort of clickable image in Chapter 15. In the sidebar about making button images, one of the steps describes how the coordinates are passed to the form handler. These coordinates can be used by the form handling script to send the user to a different URL depending on where they clicked.

 

About Image Maps

Image maps were designed for use with actual images of maps. Certain places on the map, called hotspots, are linked to different documents. For instance, in an image map of the world, you can click on Australia to visit a page about that continent.

Image maps work in one of two ways: on the server side or the client side. In either case, the image has invisible hotspots marked on it that correspond to sets of coordinates.

In a server-side image map, when the user clicks on the image, the coordinates are passed to a CGI script on the Web server, which then translates the coordinates into the corresponding link or action and sends the results back to the browser, which then opens the link, plays the map, or whatever.

Dreamweaver's Image Map Editor creates client-side image maps. In this type of image map, the coordinates of the hotspots are recorded in the code for the local document. When the user clicks on a hotspot, the browser does the figuring, thus skipping the step of having to contact a remote server. Client-side image maps can work whether or not the document is on a server.

Client-side image maps have an added bonus feature: when the user mouses over a hotspot on the image, the browser recognizes that there's a link there, and the pointer changes into a little pointing hand (Figure 5).