Image Map Lesson

March 5, 2003

What is an Image Map?    Image Map coding     Finding COORDS in Photoshop     Tool-based Image Maps in ImageReady     Layer-Based Image Maps in ImageReady    Example

Image Maps

An Image Map links the areas of an image with a series of URLs so that a click in each area brings the user to a different page. Another way of describing and Image Map is an image that contains designated hotspots, each with its own URL link.

There are Client-side and Server side image maps.
We use Client-side as they are faster because they are interpretted in the visitor's browser and don't have to consult the server for each click;

There are many different ways to create an image map.


To Create In BBEdit (through HTML coding):

<MAP NAME="label"> label is the name of the map

< AREA SHAPE="type" COORDS=n,n,n... HREF="url.html">

Shape Types ARE:
    RECT     COORDS="x1,y1"    Top left, bottom right corners NO SPACES
    CIRCLE     COORDS="x,y,r"     center x,y , radius
    POLY     COORDS="x1, y1,x2,y2,x3,y3..."    top, clockwise, x,y values of each point

  HREF="url.html"     when click on that area OR use NOHREF if there is no result (holds place)
You must use the full url for other sites: HREF="http://www.art.com"

  TARGET="windowname"     for frame or new _BLANK page

Add new <AREA tags for each defined area>

</MAP> to complete map tag

Then you need to call the image that the map is applied to:
<IMG SRC="image.gif" USEMAP="#label">     (NAME in MAP)

(image to be used for image map) - Also add any other image attributes BORDER, etc.


TO DETERMINE COORDS IN PHOTOSHOP:

  1. Open your image with "buttons" (About Us, Main, Email Me, etc. - circle, square, poly)
  2. Save as GIF
  3. Windows > Palettes > Show Info
  4. Edit > Preferences > Display & Cursors... Other > Precise
  5. Edit > Preferences > Units & Rulers > Units: Rulers > Pixels
  6. Point cursor in top-left corner of rectangular button
  7. Using Info window, write down x and y coordinates
  8. Move cursor to Bottom-right; write down x and y coordinates (and repeat for each point of polygon)
  9. Circle is trickier: Use Rectangular Marquee to draw a box at the center (diameter), take 1/2 of W for Radius; x,y = guess center
  10. Browse file and confirm that maps are positioned correctly, or adjust coordinates until perfect.


To Create Tool-based Image Maps in ImageReady:

  1. Select Rect, Cir, or Poly Image Map Tool in Toolbox
  2. For Rect/Cir = drag over area to define (shift=square, alt-drag for center)
    For Poly - Click in order around area to define (shift=45 deg), close w/ double click
  3. To adjust use Image Map select tool (with Arrow)
  4. In Image Map tab, add URL, ALT, and area name (include http:// for absolute URLs)
  5. Repeat for ALL MAP AREAS
  6. File > Save Optimized: HTML OPTIONS > Client-side, gives you HTML page, must copy info
  7. Save both the HTML and IMAGES, it will give you the image map code to copy and paste into your html page


To Create Layer-based Image Maps in ImageReady:

  1. Create your image in Photoshop with separate layers for each button/hotspot
  2. In Layers palette, select a layer with transparent area (hotspot / button).
  3. Go to: Layer > NEW LAYER-BASED Image Map Area
  4. Enter the Name, URL, ALT in Image Map tab
  5. Repeat for ALL MAP AREAS/ Layers
  6. File > Save Optimized: HTML OPTIONS > Client-side, gives you HTML page, must copy info
  7. Save both the HTML and IMAGES, it will give you the image map code to copy and paste into your html page


Image Map Example:

Click anywhere

CIRCLE Coordinates are: x,y,r (x,y=center r=radius) in that order.

RECT coordinates are: x1,y1,x2,y2 (upper right x,y, lower left x,y) in that order.

POLY coordinates are: x1,y1,x2,y2,x3,y3,x4,y4...(top and around clockwise)

Back to Top
Today's Rollover Lecture     |     Back to Syllabus