precisioninfo.com - Dr Bryan Hall - 2003

Image Maps

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:

1. User clicks on Image map and the browser sends the coordinates of the click to a cgi script resident on the server for processing (usually by appending the coordinates to the URL of the cgi e.g. map.cgi?horiz=245&vertical=124)
2. The cgi script then determined which URL the browser should request and sent the browser a URL re-directive
3. Upon receiving the URL re-directive the browser would request the URL from the Web server
4. The Web server would finally supply the required URL

Phase 2 Maps

These maps eliminated the issuing of the URL re-directive by the cgi to the browser. In these maps:

1. User clicks on Image map and the browser sends the coordinates of the click to a cgi script resident on the server for processing (usually by appending the coordinates to the URL of the cgi e.g. map.cgi?horiz=245&vertical=124)
2. The cgi script then determines what information the browser should be sent and communicates with the web server to supply the information from the appropriate URL

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:

<A HREF="http://www.precisioninfo.com"> <img src="image_maps_files/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.

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:

• left-x, top-y, right-x, bottom-y (0,0 would be top left corner of the image)

Here is the sample code for the image

<div align="center">
<img border="0" src="searchmap.gif" usemap="#search" width="435" height="46">
</div>

Here is the sample code for the map:

<map name="search">
<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>
</map>


Here is the URL of the image:

• Image - searchmap.gif

Sample Helicopter Image Map

Source Code For Helicopter Image Map

<div align="center">
<img src="banner.jpg" usemap="#helicopters" alt="Banner Image for Helicopter image map" width="630" height="75">
</div>

<map name="helicopters">
<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>
</map>


Reference:
These images appeared on the Boeing internet site.
http://www.boeing.com/companyoffices/gallery/images/military/rotorcraft/ch47sd/ch47sdphotos.htm
23 September 2003

HTML Specification

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.

• W3c - HTML Specification