Quick and Dirty Image Map Tutorial

A friend of mine asked me about image maps a while ago and I ended up writing this up, more or less. I imagine most browsers nowadays implement client-side image maps, but you never know.

Server-Side Image Maps

Server side image maps are for older clients that don't know how to process image map information. They simply pass the coordinates of where you clicked to the server, which then figures out where to send the browser next using the .map file.

To implement a server side image map, first create the .map file that describes the image map. Mine looks like: 

rect /imagemap/red.html    0,0   48,48
rect /imagemap/green.html  49,0  97,48
rect /imagemap/yellow.html 0,49  48,97
rect /imagemap/blue.html   49,49 97,97
Next, in your HTML document, create a hyperlink that contains your IMG (with the ISMAP attribute) and points at the .map file in the HREF. In some cases the HREF will contain a prefix telling the server where to find an image map processing script. in other cases the image map handler is built into the server, in which case the HREF is simply the relative path to the .map file (for example, if the .map file is in the same directory as your HTML document, then you would have HREF="sample.map"). Consult your ISP's or HTTP server's documentation for more details.

The first imagemap below is generated by the following HTML code: 

<A TARGET="imagemap_popup" HREF="/cgi-bin/imagemap/imagemap/sample.map">
<IMG BORDER=0 SRC="rgby.gif" ISMAP></A>
In the HREF, /cgi-bin/imagemap is the path to the imagemap script on my server and /imagemap/sample.map is the HTTP path to the .map file (this gets passed as "pathinfo" to the imagemap script).

Before you click anywhere, as you mouse over this image, notice what your browser displays in the status line (where it shows you the hyperlink you would access if you clicked at the current mouse location) -- you should see the URL of the map file followed by some coordinate information.

See http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html for more help on server side image maps.

Client-Side Image Maps

Client side image maps are for newer clients that process the map information themselves, which reduces server and network load. In this case, the IMG tag has a USEMAP attribute that works more or less like a named anchor reference -- the map's NAME is sample1, so USEMAP="#sample1".

Here's the HTML code for the next example: 

<MAP NAME="sample1">
  <AREA SHAPE="rect" COORDS="0,0,48,48" TARGET="imagemap_popup" HREF="red.html">
  <AREA SHAPE="rect" COORDS="49,0,97,48" TARGET="imagemap_popup" HREF="green.html">
  <AREA SHAPE="rect" COORDS="0,49,48,97" TARGET="imagemap_popup" HREF="yellow.html">
  <AREA SHAPE="rect" COORDS="49,49,97,97" TARGET="imagemap_popup" HREF="blue.html">
</MAP>
<IMG BORDER=0 SRC="rgby.gif" USEMAP="#sample1">
Again, before clicking, mouse around the image and notice that this time the browser's status line shows you the actual destination URL corresponding to each section of the image map. Contrast this to the behavior of the server side image map above.

Combining Both Approaches

Finally, the example below combines both approaches so that newer browsers can still do their thing but older browsers can still make use of the server side method. This final example also uses JavaScript to pop up a new window with controlled size and features containing the target page. Obviously this won't work if the client is using server side image map handling, so if someone using an older client clicks on this example, it will look the same as the first example.

Here is the JavaScript which is in the HEAD of this document: 

<SCRIPT LANGUAGE="JavaScript">
<!--
function popup(url)
{
  win = window.open(url, "imagemap_jspopup", "width=300,height=200,scrollbars=yes");
  win.focus(); // bring the pop-up window to the top of the desktop
  false;
}
// -->
</SCRIPT>
Next, here are the MAP, hyperlink, and IMG tags: 
<MAP NAME="sample2">
  <AREA SHAPE="rect" COORDS="0,0,48,48" HREF="javascript:popup('red.html')">
  <AREA SHAPE="rect" COORDS="49,0,97,48" HREF="javascript:popup('green.html')">
  <AREA SHAPE="rect" COORDS="0,49,48,97" HREF="javascript:popup('yellow.html')">
  <AREA SHAPE="rect" COORDS="49,49,97,97" HREF="javascript:popup('blue.html')">
</MAP>
<A TARGET="imagemap_popup" HREF="/cgi-bin/imagemap/imagemap/sample.map">
<IMG BORDER=0 SRC="rgby.gif" ISMAP USEMAP="#sample2"></A>

Miscellaneous

For further info on imagemaps, http://www.cris.com/~automata/tutorial.shtml has a good collection of links.

This page has been accessed 9627 times since 8/27/1999.

[Home]
zorak+www@ninthbit.com
This page last modified on Fri Feb 14 16:49:08 2003