Using Imagemaps

How to create an Imagemap within your personal home pages:

1. You must generate an imagemap configuration file. There are a few ways to do that, but probably the easiest way would be to use a third-party application. Many imagemap editors are found in the Imagemaps section at Yahoo!. They will help you generate a configuration file for upload to your public_html directory (don't forget to upload the image file also.) Usually the program will ask you which format to save the file in. You should choose NCSA, as we use an NCSA compatible server.
   
2. The next step is to use that map file as a reference inside your document. For example, if your imagemap was called my_map.map, and you had an image called my_image.gif, You would refer to it as follows in a document:
   

   <A HREF="/~user_name/my_map.map">
   <IMG ISMAP SRC="/~user_name/my_image.gif">
   </A>

   Note the ISMAP tag inside the image reference. That tells the server to use that image as an imagemap. Don't forget the ISMAP portion.
   
3. The format for the my_map.map file is a series of instructions. The first item is the shape of the area to be defined (either a circle, rectangle, or polynomial). Each of these items is followed by a valid URL and then followed by the coordinates of the map. For a circle, the first set of coordinates is the center and the second set is a point on the circumference. For a rectangle, the coordinates are the upper right and lower left corners. Lastly, for a polynomial, each set of coordinates is another vertex of the polynomial. If you wish the polynomial to be closed, you must make sure that the last coordinate matches the first. In addition, a default item is listed with it's URL in case the user clicks in an undefined area. An example follows:

   
   circle http://www.eng.uc.edu/~user_name/circle_choice.html 100,40 130,40 
   rect http://www.eng.uc.edu/~user_name/rect_choice.html 360,330 550,450 
   poly http://www.eng.uc.edu/~user_name/poly_choice.html 540,140 470,140 390,230 546,145 
   default http://www.eng.uc.edu/~user_name/default.html