Penn Computing
Computing Menu Computing A-Z
Computing Home Information Systems & Computing Penn

Using an Imagemap on a Web Page

Note: As of April 1st, 2008 personal homepages are no longer supported

An imagemap allows the user to include a graphical image in their HTML documents and map that image with links that lead to other HTML documents.

You should review the NCSA tutorial on imagemapping to get more detailed information on how to create an imagemap but here's a summary of setting up an imagemap.

  1. Create the image
    You first need to create your image and then include that image in your html directory following the filenaming conventions for the type of image that you produce.
  2. Determine the areas of the image that will link to other HTML documents
    You then need to determine the coordinates of the areas of your image which will be mapped to link to other documents and you need the URL's for those documents. These areas are defined as x and y coordinates and there are various software that can help you in mapping these coordinates. A search at a site like http://www.shareware.com can allow you to ftp these software packages.
  3. Create the map file
    All of this information is stored in an imagemap map file that is also stored in your html directory and the filename must end with the suffix .map. Look at our sample map file.
  4. Set the permissions of the files
    Now you must make all the files in your html directory available to the world. To do this you must change the permission mode of the files. Use the following commands to do this:
    chmod 644 ~
    chmod 644 ~/html
    chmod 644 ~/html/*
  5. Reference the imagemap in your HTML document
    Once you've created your image and the map that defines areas of the image that will link to other HTML documents, you can include your imagemap in your HTML document in one of two ways:
    • as a magic mime type
      This method of having the server treat your imagemap as a mime type loads the image faster. The mime type has been defined on Dolphin so you would only need to reference your map file in your HTML document. We would strongly recommend that you use this method.

      For example:

      <A HREF="/~formuser/home.map"> <IMG SRC="/~formuser/homepage.gif" ALT="" ISMAP></a>
    • as an argument to a CGI script
      For backward compatibility, you may also reference your imagemap as an argument to a CGI script. The location of the imagemap CGI script on Dolphin is /cgi-bin/imagemap.

      For example:

      <A HREF="/cgi-bin/imagemap/~formuser/home.map"> <IMG SRC="/~formuser/homepage.gif" ALT="" ISMAP></a>

    You can also opt to include your imagemap as a client side imagemap but you must have the appropiate browser installed on your workstation. See Netscape's instructions for creating a client side imagemap or instructions for some selected browsers.


Please note: This material is no longer current and appears online for archival purposes only.
Use the search and navigation tools above to locate more up-to-date materials, if they exist.
    dolphin services

top

Information Systems and Computing
University of Pennsylvania
Comments & Questions


University of Pennsylvania Penn Computing University of Pennsylvania Information Systems & Computing (ISC)
Information Systems and Computing, University of Pennsylvania