HCI 201 Multimedia and the World Wide Web

Fall 1999 - Section 703 - Image Maps


Image maps provide a way to link to a page based on selecting a part of an image. The areas selected can be a circle, rectangle or polygon.

While image maps can be located on the client or the server, we will review the client-side map. It is easier to work with and control than the server-side map.

  1. First step: select an image to map.
  2. Determine which areas of the image will provide links.
    Keep this as simple as possible, (circle, rectangle, polygon).
  3. Determine which shapes and geometric points (in pixels) describe the linkable areas within the image.
    • Circle - x,y coordinates of the center and length of the radius
    • Rectangle - x,y coordinates of the top left corner and x,y coordinates of the bottom right corner
    • Polygon - multiple x,y coordinates (at least three)
  4. Develop the HTML tags to define the image map.
  5. Test

Week 9
Previous | Next

Course Home | Announcements | Class Roster | Schedule | Syllabus