Webhelp.org Presents:
Crashcourse in IMAGEMAPPING

This describes what is commonly refered to as "client side imagemaps".

What is an IMAGEMAP?

An imagemap is what you would use to link multiple URLs to one image using different coordinates within the image.

First you would have an image. I'm going to go into PAINT and make a simple image. I'll make a square that is 200 wide and 200 tall.

I'm now going to divide the image into four quarters. As I draw the lines, I note the coordinates that the lines are being drawn at. Of course, I'm using a simple square divided right down the middle so it's easy to say I have a vertical line drawn at 100 and a horizontal line drawn at 100.

Let me color this a little and add some link names...

Now to display these images AND use them as an image map, you need to modify your IMG SRC tag a little...

<IMG SRC="imap.gif" USEMAP="#imagemap" BORDER=0>
The USEMAP tag designates the location of the imagemap's coordinates and links. Sometimes it can be in a whole other HTML document (for example: USEMAP="imagemap.html#imap"), and I've found most tutorials show this method. I chose to put the imagemap coordinates in the same document as the rest of the HTML, with the MAP NAME of "imagemap", which brings me to the next step, creating a map definition. You would start with NAMING your image map. You can see in my IMG SRC tag that I already chose the name "imagemap" for myself. Define the shape (chosing from rect, circle or polygon) and the links you want particulair coordinates to take the user. Here's my map definition:
<MAP NAME="imagemap">
<AREA SHAPE="RECT" COORDS="0,0,100,100" HREF="/webhelp/html/">
<AREA SHAPE="RECT" COORDS="100,0,200,100" HREF="/webhelp/frames/">
<AREA SHAPE="RECT" COORDS="0,100,100,200" HREF="/webhelp/tables/">
<AREA SHAPE="RECT" COORDS="100,100,200,200" HREF="/webhelp/imagemap/">
This is the essential chunk of HTML that would be placed in the HTML document (or another document file dedicated to the imagemap).

This gives you the working example found here.

The coordinates are the most confusing part of image mapping. The set of four numbers in each COORDS break down like this:

  • First Number: The upper left COLUMN of the link.
  • Second Number: The upper left ROW of the link.
  • Third Number: The lower right COLUMN of the link.
  • Fourth Number: The lower right ROW of the link.
Trust me, you. If your links don't correspond with what you planned your imagemap to be, you probably have the ROWS and COLUMNS mixed up.

E-Mail Jonny Webhead