Template and Syntax for an Imagemap

This page is part of the WebCom Web Publishing Guide. It provides a template to use when including imagemaps (clickable images) in an HTML document, as well as a working example to demonstrate how an imagemap actually works.

Imagemaps in Your Files

This is what an imagemap hotlink looks like in an HTML file:

<A HREF="http://webcom.com/~webcom/youruserid/path/to/yourfile.map"> <IMG SRC="path/to/your.gif" ISMAP></A>

While this looks fairly complex, the only part that needs to be changed when the template is included in a Web page is the location of the map file. The difficult part (which we'll get to in a moment) is creating the map file itself, and that turns out to be easy, using the right tools.

Detailed Breakdown of an ImageMap Link

<A HREF="http://webcom.com/~webcom/youruserid/path/to/yourfile.map"><IMG SRC="path/to/your.gif" ISMAP></A>

<A HREF="

This is the opening anchor of the hotlink surrounding the IMG SRC declaration.

http://webcom.com/~webcom/youruserid/path/to/yourfile.map">

This portion of the hotlink tells the WWW Server where to find the "map" file. This file must be stored in or under your "www" directory, so the server can find it (like any other Web document).

<IMG SRC="path/to/your.gif" ISMAP>.

This portion of the hotlink tells the WWW Browser where the "clickable" image is located, and the ISMAP tells it that the image is clickable.

</A>

This is the closing anchor of the hotlink.

Working example of an Imagemap

Syntax for non-WebCom users whose pages are served by either the NCSA or the CERN WWW Servers.