BreBru's Art Room

 Extra Info

 Music Room



Learn To DrawLearn To Draw Learn To PaintLearn To Paint Photoshop TipsPhotoshop Elements Animation MenuAnimation Menu Art MenuArt Principles Art AppreciationArt Appreciation


Image Map Tutorial


I know that there are a large number of image map tools that will automatically generate the correct code for you to create image maps.  Many of them can be downloaded for free but the better ones do cost money.  Building the maps by hand is not, however, a money saving effort but a method for keeping better control of your web pages.

Once you have the basics, creating image maps by hand is really not that much more difficult than by the automated method and you have complete control over all the steps.  The key is a bit better note taking and a clear idea of what is supposed to happen when the user clicks on an "active" area of your image.

Step 1: Build the image

resized version of splash screenTo illustrate the use of image maps I am going to use the splash screen for this site which is set up as an image map.  I placed the "table of contents" over to the lower left and this is the only area of the screen that will have "active" spots.  Logically enough, if the user clicks on one of the items the code will call up the appropriate web page.

The image is basically a digital photograph that has had some editing to remove a small well house and barb wire fence and then the text has been placed on top.  The main title uses the techniques outlined in the Cutout Text Tutorial also available at this site.

Step 2: Understanding X-Y coordinates

The computer screen is composed of "dots" in a grid with the grid size (640 x 480 for example) indicating how many dots or pixels (picture elements) there are horizontally and vertically on the screen.  Therefore every position on the screen can be located by its X or horizontal, and Y or vertical position.

Step 3: Use the mouse

table of contentsWith the image loaded into PSP5 (or just about any other graphics program for that matter) I can move the cursor to the upper left hand corner of the first item in the contents list.  If you look down at the lower left hand corner of  PSP5 as you move the cursor you will see two numbers constantly changing.  These are the X and Y coordinates of each pixel that the mouse pointer passes over.

We will be defining "rectangles" as active areas that the user can click on and a rectangle is defined by locating its upper left corner and its lower right corner.  Once you have those two coordinates the computer can always know if the mouse has been clicked within those boundaries.

lower left hand corner of PSP5 screenWhen I get the mouse pointer to the spot just above and the to right of the first item I can read off that location at the bottom of the screen, in this case (20,285). I can then move the mouse over to the lower right hand corner and do the same thing.

a rectangle is defined by upper left and lower right cornersThis time when I read off the coordinates they are (235,314).  In this case you will note that I have gone out as far as the widest text element.  I've done this to make life a bit easier.  For all other coordinate sets I will now have a left horizontal setting of  20 and a right horizontal setting of 235, the only thing that will change is the vertical locations and I try to get them as regular as possible too.

Step 4: Write down all the coordinates

each of the corners need to be recorded

Now you move through each of the items in the content list recording the upper left and lower right coordinates.  In each case this is an X-Y pair, how far horizontally, in pixels,  from the left side of the screen and how far down from the top of the screen (the upper left corner of an image is position 0,0).  For use in the necessary HTML code each pair of numbers is grouped together so you get a listing like this:

      Fine Arts 11:                20,285,235,314
      Animated HTML:         20,315,235,339
      Farm Photos:                20,340,235,364
      Graphic Experiments:    20,365,235,389
      Tutorials:                       20,390,235,429

Step 5: Check the numbers

Though you will not get a disaster if you define intersecting rectangles it is best not to confuse the browser.  Therefore set up your numbers so that each rectangle is separate from the others with the next lower Y coordinate at least 1 pixel larger than the bottom right Y coordinate of the item above.

Step 6: Looking at the code:

Here is the code that displays the main menu for this site:
      <TITLE>PSP5 Web Graphics</TITLE>
      <MAP NAME="menu">
      <AREA SHAPE="rect" COORDS="20,285,235,314" HREF="fineart/intro1.htm">
      <AREA SHAPE="rect" COORDS="20,315,235,339" HREF="anhtmidx.htm">
      <AREA SHAPE="rect" COORDS="20,340,235,364" HREF="farmphot.htm">
      <AREA SHAPE="rect" COORDS="20,365,235,389" HREF="grexperm.htm">
      <AREA SHAPE="rect" COORDS="20,390,235,429" HREF="scptutor.htm">

      <Center><IMG  SRC="mainidx.jpg" USEMAP="#menu" WIDTH=598 HEIGHT=440 ALT="click on options bottom left" BORDER=0 ></Center>

It doesn't seem fair does it?  It ought to be more complicated, after all everybody uses automated image map programs if they can get ahold of one!  But that is the point, you can automate this process because it is basically simple, the problem with the automated methods is that far too often they want to toss in their own code snippets, conditions and advertising, right within your web page.

Step 7:  The MAP tag

The MAP tag, like most HTML tags is a container so you need the opening <MAP > and the closing </MAP>.  If you have created an image map and it isn't working one of the most common errors is to have forgotten the closing </MAP>.

<MAP> takes one required element, the NAME property, which gives the browser the location in the HTML code for the active areas.  You MUST have a NAME defined and get into the habit of always typing it in lower case.  Another very common error which will cause the image map to fail is to have a difference in case between the map definition (in our example "menu") and where the property is put to use by USEMAP (say perhaps, "Menu").  The property used must be exactly the same in both locations.

Step 8: The AREA tag

The AREA tag is the heart of an image map.  This is what tells the browser where the active areas are in the image.  The SHAPE property, as well as "rect" for rectangle, can define circles and polygons but that is another discussion.  The COORDS property contains the two pairs of X-Y coordinates that define each rectangle, placed between quote marks.  This is another potential problem area when creating image maps.  If you forget an opening or closing quote mark in any of the sets the image map won't work, so check carefully.

Finally the HREF (hypertext reference) which you have seen before with the Anchor tag, defines which document or image the browser is to select when the area is clicked on.  Again the quotes are crucial and forgetting one will shut down the image map.

Step 9: The USEMAP property

To actually put the image map to work you add the USEMAP property in the IMG tag itself.  The IMG tag calls up the image, places it on the browser's screen and then stores the active areas in anticipation of a mouse click.  Similar to within document hypertext jumps, or bookmarks, USEMAP requires the use of the "#" to jump to the map coordinates based on the indicated name in quotes.

Step 10:  Try it out

There, that is it.  8 maybe 10 lines of code, a bit of work with the mouse, some careful recording of coordinates and the job is done.  Do one of your own, or download my main image and do the work just to check out the process  (create dummy files to jump to).  Once you have completed it successfully, being able to check back with the correct code, then you can start your own.  Some final pieces of advice:
  • Put the <MAP> coding right after the <BODY> tag in a document even if the image is not used till much later in the document.  If you have several image maps in a single document, put all of the <MAP> codes one right after the other.  This gives the browser more time to digest the information and is easier for debugging.
  • For some reason the <P> tag can cause problems at least in Netscape.   Therefore if you have an image map coming directly after a block of text defined with the <P> (paragraph) tag, make sure that there is a closing </P> tag, this seems to solve the problem.
  • Type the AREA tags so that everything lines up as you see above, you may need to put in some spaces if there are 2 and 3 digit numbers intermixed, however it means that it is very easy to check all the elements to make sure spelling, quotes and brackets are correct.
  • Another very common error that will shut down an image map is to miss one closing ">" just about anywhere in the document.
Have fun, you have taken one more step towards freedom!