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:
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:
These maps eliminated the issuing of the URL re-directive by the cgi to the browser. In these maps:
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:
<img src="images/collage_straight_levels.jpg" alt="Inline Image - Collage Photograph Without Digital Enhancment" border="1" width="180" height="180" vspace="10" hspace="10" ISMAP>
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.
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.
These image maps can be implemented using Java Applets and other sophisticated mechanisms
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
<img border="0" src="searchmap.gif" usemap="#search" width="435" height="46">
Here is the sample code for the map:
<area shape="rect" coords="0,0,216,45" href="http://www.google.com" title="" target="_blank">
<area shape="rect" coords="218,0,434,45" href="http://www.altavista.com" title="" target="_blank">
<area shape="default" nohref>
Here is the URL of the image:
<img src="banner.jpg" usemap="#helicopters" alt="Banner Image for Helicopter image map" width="630" height="75">
<area shape="rect" coords="0,0,105,74" href="ch-47water1.jpg" target="_blank">
<area shape="rect" coords="105,0,209,74" href="ch-47water2.jpg" target="_blank">
<area shape="rect" coords="209,0,314,74" href="dvd-110-05.jpg" target="_blank">
<area shape="rect" coords="314,0,419,74" href="dvd-110-06.jpg" target="_blank">
<area shape="rect" coords="419,0,520,74" href="dvd-110-07.jpg" target="_blank">
<area shape="rect" coords="520,0,629,74" href="SDflight.jpg" target="_blank">
<area shape="default" nohref>
These images appeared on the Boeing internet site.
23 September 2003
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.