University of Oregon - Department of Architecture - ARCH 424/524 Cheng - Advanced Design Development Media

Making an Image Map

1. Plan the layout of your page, assuming some people will only see a 640w x 480h pixel screen.

2. Create the bitmap image to be used as a map. You can generate a bitmap GIF image by:

working in an image processing program like Photoshop and saving in GIF format
working in another graphics program and saving in a bitmap format such GIF, PICT, JPG
working in any program on a Macintosh using Command + Shift + 3 pressed simultaneously to create a screen capture called "Picture 1" on the startup disk.

Note that the latter two may require conversion to GIF to be easily readable by all. This may be done with Graphic Converter.

3. Find the coordinates of the map hotspots.Use a program such as Graphic Converter to find the (x,y) locations of the upper left and lower right corners of rectangles. See coordinates location

Optional: You can make the GIF transparent by tapping a color with the magic wand.

4. Substitute into the model HTML code with your references and map coordinates.(This is from a tutorial by Steve Rogers and Marcus E. Hennecke) There are two parts to the code: a map and the image listing which reference the map.

The map syntax to create an active rectangle with upper left corner (x,y) = (20,21) and lower right corner (x,y) = (77,101) and link it to a file called "rectangle.html" looks like this:

      <AREA SHAPE="RECT" COORDS="20, 21, 77, 101" HREF="rectangle.html">

To assign a URL to the default region, use the coordinates for the entire image. To ensure that smaller overlapping regionswill take precedence, place the default below all other regions.

       <MAP NAME="name">
       <AREA SHAPE="RECT" COORDS="20, 21, 77, 101" HREF="rectangle.html">
       <AREA SHAPE="RECT" COORDS="0, 0, 152, 242" HREF="default.html">
       </MAP>

Then when you reference the image, make sure you tell it to use it as a map:

   <IMG SRC="image.gif" USEMAP="#name">

5. Test the HTML from a browser like Netscape and modify as necessary.

6. Place your imagemap on the page with a table or frame if desired. A. To create the original layout with two top cells and a single bottom cell, modify the standard 2x2 cell table ot have the lower row span 2 columns:

The standard syntax:

<TABLE BORDER CELLSPACING=2 CELLPADDING=1>
<TR>
	<TD>index
	<TD>contents
<TR>
	<TD>bottom 	
	<TD>line
</TABLE>

creates:

index contents
bottom line


<TABLE BORDER CELLSPACING=2 CELLPADDING=1>

<TR>
	<TD>index
	<TD>contents
<TR>
	<TD COLSPAN=2>bottom line

</TABLE>

creates:

index contents
bottom line

B. Substitute your image file for the word "index".

edited Jan 5, 1996 by nywcheng