Chapter 22. How Image Maps and Interactive Forms Work

Graphics called image maps and functions called interactive forms demonstrate two of the more common and helpful uses of HTML. Image maps are static images that have been turned into clickable images with various clickable parts. Interactive forms are HTML-based pages you fill out by providing information such as your name, email address, and similar information. Both image maps and interactive forms are created using Common Gateway Interface (CGI), a communications protocol by which a web server can communicate with other applications. (For more information about how CGI works, turn to Chapter 35, "How CGI Scripting Works.")

Image maps can be thought of as fancy hyperlinks. However, instead of a word, an entire icon, or an image linking to another page, an image is divided into different segments, or coordinates, that link to different HTML pages. That is, image maps link to another document through a predefined hot area within an image. As soon as you click your mouse on a hot spot, a CGI script and a special image map coordinates file with the suffix .map go to work. A CGI application reads the map file to match coordinates of a mouse click with a corresponding URL. For instance, imagine an electronic map of the United States in which you click Washington, D.C. In the HTML code for that page, the electronic map is surrounded by a tag and an attribute called ISMAP. The code looks something like this:

<A HREF="some.server/maps/clickable.map"> <IMG src="/books/1/10/1/html/2/clickable.map" ISMAP> </A>\

The x,y coordinates of your mouse click are sent to the server. The coordinates are received by the server and then redirected to a CGI application. The CGI application scans the file for matching coordinates and then forwards the corresponding URL to the server. Lastly, if the web page resides on the same server, it delivers that web page to the client browser. If not, the server returns the URL to the client browser, which in turn sends a request to the correct server for the page. You then see the page about Washington, D.C. begin to load on your browser. Behind the scenes, the server passed your mouse click coordinates to a CGI application via the CGI. Then, the CGI application matched those coordinates to its URL in a .map file. Finally, the CGI sent the URL back to the server, which redirected the client browser to the new web page.

Forms work differently, although they also use CGI. In a form, when you fill in information on a web page, that information goes to the server for processing. Next, the server redirects the information to a CGI application that is called by the form submit. (CGI scripts are activated by the server in response to an HTTP request from the client.) Lastly, a CGI application might send form data to another computer program, such as a database; save it to a file; or even generate a unique HTML document in response to the user's request.