Icons and Imagemaps

In-line images as hyperlinks

Images in HTML documents can be included in, or be the sole constituent of hyperlinks. For example

<a href="index.html"><img src="gifs/up-arrow.gif" alt="Up"></a>

(The alt keyword defines the text shown in place of the image on non-graphical browsers, or if the client is configured not to automatically load in-line images, or if the browser cannot load the image for some other reason, e.g. bad internet connection.)

Inclusion of the parameter

border = 0

(N.B.- a Netscape extension) within the <img ...> tag prevents the usual blue/purple border from appearing around the image.

The inclusion of such icons is a useful and extremely common practice (including the page you are now reading).

The use of images as hyperlinks is in some cases more appropriate than providing text-only links, producing a more user-friendly document. 'Menus' can be produced by aligning rows and columns of 'clickable' icons (e.g. the 8 PPS2 menu buttons); but sometimes a more sophisticated approach is required.

Imagemaps

With 'clickable maps' ('imagemaps') different regions of a single image link to different URLs, when they are clicked. The disadvantage of this from the author's point of view is that it requires extra server-software which calculates in which sensitive region of the image the cursor lies (the coordinates of the cursor are sent by the client) and fetches the appropriate URL. One version of this software is called imagemap.

The location on the WWW server where such software resides is often called cgi-bin (Common Gateway Interface- bin for binaries) or htbin (depending on the server type). (cgi-bin is described in the notes on WWW server configuration in this Section.) It is relatively straightforward to write your own software in cgi-bin (if you have permission to put it there!). This is the subject of another tutorial in this Section.

With some imagemap software on certain types of WWW servers, the creation of imagemaps requires editing of reference files in cgi-bin (or equivalent)- so you need help from the 'Webmaster' who runs your server. With other servers, they simply read data files from anywhere on the Web server, such as in your own directory (if this option has been configured- refer to the notes on WWW configuration).

Examples of Imagemaps

PPS Consultant Glenn Proctor of the Protein Structure Group, University of York, demonstrates imagemaps in the study of protein structure, using E-selectin as an example
Maja Kricker of the U.S. The National Institute of Environmental Health Sciences (and a PPS '95 participant) includes an imagemap in Adventures with Acetylcholinesterase
The Glycolytic Enzymes (in Section 12)
PPS Consultant Henry Rzepa's talking organic molecules
Clickable Map Tutorial by Judith Murray-Rust

Last updated 15th Mar '97