Image maps partition an inline image so that by clicking on different parts of the image the server will return information (usually in the form of a URL hyperlink) specific to that region of the image.
Using image maps allows you to create interactive maps and graphical menus by using either maps or diagrammatically representable spatial images
Image maps have progressed through 4 identifiable stages:
Phase 1 Maps
These maps were operated and executed entirely via the Web server using the CGI gateway. This involved 2 information round trips every time a user clicked on a section of an image map:
Phase 2 Maps
These maps eliminated the issuing of the URL re-directive by the cgi to the browser. In these maps:
Capturing Image Co-ordinates
If you point a mouse at the image below and click on it you will see that your browser will load a URL to the precisioninfo.com home page with a co-ordinate string appended to it. You may be able to see these co-ordinates in the far bottom left corner of your internet browser window when you point the mouse at various locations on the image.
The source code for the browser side of this example phase 1 or phase 2 image map is:
To get a fully functional image map the target script would have to point to a script that picked up the coordinate string and processed it using a server side (phase 1 or phase 2) image map.
Phase 3 Maps
With the introduction of HTML 3.2 support for Image maps was built into the HTML specification. The processing of Image maps can now be undertaken entirely by the browser. The Image map specification now permits for an image to be inserted as a map into an HTML document. Along with the map information is embedded directly into the HTML code which tells the browser that if the client clicks on a certain region of the image then a specific URL is to be returned.
Phase 4 Maps
These image maps can be implemented using Java Applets and other sophisticated mechanisms
Sample HTML Image Map
The following will produce the image map shown to search Google or Altavista.
For a rectangular image map the pixel coordinates must be advised as:
Here is the sample code for the image
Here is the sample code for the map:
Here is the URL of the image:
Sample Helicopter Image Map
Source Code For Helicopter Image Map
The intention of these maps is explain the essential ideas associated with preparing image maps. If you plan to build your own please see Chapter 6 of the HTML specification for precise details on how to proceed. The specification includes information on preparing image maps using irregular shapes.