How image maps work

This page is not complete.

Graphics called image maps demonstrates one of the most common and helpful uses of HTML. Image maps are static images that has been turned to clickable images with various clickable parts. Image maps are created using Common Gateway Interface (CGI), a communications protocol by with the web server can communicate with other applications.

Prerequisites: You should know about the client/server model of the Internet.
Objective: Learn how image maps work.

How image maps work


  1. In this map example, the user clicks Toronto. The x, y grid coordinate is 75, 25. In the HTML code, the browser recognizes the ISMAP image tag attribute. The mouse click activates the browser to send the x,y coordinate of the click to the server. The location of the map file data is also sent to the server.
  2. The server hands off the coordinates and map file data to a CGI application. The CGI application matches the coordinates to the URL that has been requested by the user by clicking that portion of the map. The URL is handed back to the server, and the server sends the page to the client.
  3. The web document is either served up (if it resides on the same server) or the client browser is forwarded to the new URL.
  4. The client browser either displays the returned page (based on the returned URL) or sends a request to the correct server for the page.

Document Tags and Contributors

Contributors to this page: chrisdavidmills, Jeremie, Andrew_Pfeiffer, AfeefRb
Last updated by: Jeremie,